教學文章

Home

DREAMWEAVER

 

網站的右下角或右方的一個往上的箭頭,按下去就可以回到網頁頂部。

 

 

 


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>