網站的右下角或右方的一個往上的箭頭,按下去就可以回到網頁頂部。
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>