js常用返回網頁頂部幾種方法

一、使用錨標記
此方法最簡單，只需在body下放個隱藏的錨點標記，內容如下：

代碼如下	復制代碼
<a name="top" id="top"></a>

然后，在網頁底部放一個訪問鏈接即可：

代碼如下	復制代碼
<a href="#top" target="_self">返回頂部</a>

此方法效果是一次直接跳到頂部，而且URL地址欄會顯示個#top，追求完美的可使用下面方法。

二、使用JS scrollTo函數
javascript scroll函數（scrollBy scrollTo）是用來滾動頁面到指定位置，格式定義如下：

■scrollBy(xnum,ynum)
■scrollTo(xpos,ypos)
其中：

■xnum，ynum分別指水平、垂直滾動多少像素，正值表示向右或向下滾動，負值表示向左或向上滾動
■xpos，ypos分別指水平和垂直坐標
使用示例：

代碼如下	復制代碼
<a href="javascript:scrollTo(0,0);">返回頂部</a>

三、scrollBy慢速滾動返回頂部
本方式使用上面提到的scrollBy函數，每次只滾動定量像素，整體看起來有點滾動效果，代碼如下：

代碼如下	復制代碼
var sdelay=0; function returnTop() {  window.scrollBy(0,-100);//Only for y vertical-axis  if(document.body.scrollTop>0) {    sdelay= setTimeout('returnTop()',50);  } }

scrollBy函數第二個參數我設了-100，越大（比如-10）滾動越慢，越小滾動越快，啟動滾動只需在頁面底部加個鏈接：

代碼如下	復制代碼
<a href="javascript:returnTop();">返回頂部</a>

JQuery實現返回頂部功能

首先需要在頂部添加如下html元素：

<p id="back-to-top"><a href="#top"><span></span>返回頂部</a></p>
其中a標簽指向錨點top，可以在頂部防止一個<a name="top"></a>的錨點，這樣在瀏覽器不支持js時也可以實現返回頂部的效果了。

要想讓返回頂部的圖片顯示在右側，還需要一些css樣式，如下：

代碼如下

復制代碼

/*returnTop*/ p#back-to-top{     position:fixed;     display:none;     bottom:100px;     right:80px; } p#back-to-top a{     text-align:center;     text-decoration:none;     color:#d1d1d1;     display:block;     width:64px;     /*使用CSS3中的transition屬性給跳轉鏈接中的文字添加漸變效果*/     -moz-transition:color 1s;     -webkit-transition:color 1s;     -o-transition:color 1s; } p#back-to-top a:hover{     color:#979797; } p#back-to-top a span{     background:transparent url(/static/imgs/sprite.png?1202) no-repeat -25px -290px;     border-radius:6px;     display:block;     height:64px;     width:56px;     margin-bottom:5px;     /*使用CSS3中的transition屬性給<span>標簽背景顏色添加漸變效果*/     -moz-transition:background 1s;     -webkit-transition:background 1s;     -o-transition:background 1s; } #back-to-top a:hover span{     background:transparent url(/static/imgs/sprite.png?1202) no-repeat -25px -290px; }

　　

上面樣式中的背景圖片是雪碧圖，下面提供兩個單獨的返回頂部圖片方便朋友們使用：

  

有了html和樣式，我們還需要用js控制返回頂部按鈕，在頁面滾動時漸隱漸現返回頂部按鈕。

代碼如下

復制代碼

<script src="http://ajax.microsoft.com/ajax/jQuery/jquery-1.7.2.min.js"></script> <script> $(function(){         //當滾動條的位置處於距頂部100像素以下時，跳轉鏈接出現，否則消失         $(function () {             $(window).scroll(function(){                 if ($(window).scrollTop()>100){                     $("#back-to-top").fadeIn(1500);                 }                 else                 {                     $("#back-to-top").fadeOut(1500);                 }             });             //當點擊跳轉鏈接后，回到頁面頂部位置             $("#back-to-top").click(function(){                 $('body,html').animate({scrollTop:0},1000);                 return false;             });         });     }); </script>