網站的右下角或右方的一個往上的箭頭,按下去就可以回到網頁頂部。
HTML部分
下面這一行加在 <body> 的任何處皆可
<div id="gotop">˄</div>
另外,如果你覺得往上的箭頭不夠漂亮的話你也可以自己替換成圖片。
CSS 部分
#gotop {
display: none;
position: fixed;
right: 20px;
bottom: 20px;
padding: 10px 15px;
font-size: 20px;
background: #777;
color: white;
cursor: pointer;
}
因為我們要在網頁往下捲之後到一個程度才會顯示,所以預設的 display 是 none。接著要讓按鈕浮動一直固定在網頁視窗的某個地方,就要用 position: fixed,然後再利用 right 和 bottom 的值來定位在視窗的右下角。接下來就是 cursor: pointer 可以讓滑鼠移到上面是顯示連結的鼠標。
jQuery 部分
jQuery 的部分,代碼如下:(若尚未載入 jQuery library 的話,請記得載入 jQuery library)
<script type="text/javascript">
$(function(){
$("#gotop").click(function(){
jQuery("html,body").animate({
scrollTop:0
},1000);
});
$(window).scroll(function() {
if ( $(this).scrollTop() > 300){
$('#gotop').fadeIn("fast");
} else {
$('#gotop').stop().fadeOut("fast");
}
});
});
</script>




浮動式固定上選單
