網頁返回頂部的幾種方法

1，在頁面頂部固定一個  返回網頁頂部的 按鈕

.back-to-top {
    position: fixed;
    right: 20px;
    bottom: 10px;
    width: 100px;
    height: 30px;
    text-align: center;
    line-height: 30px;
    color: #2C2C2C;
    text-decoration: none;
    border: 1px solid #CCCCCC;


}

<a class="back-to-top" href="#top">返回頂部</a>

這樣一點點擊 按鈕直接返回網頁頂部

2，使用jquery方法

<script>
    var backBtn= $('.back-to-top');
    backBtn.on('click',function () {
          $('body,window').animate(
              {
                  scrollTop:0
              },300
          )
     
    })
    $(window).on('scroll',function () {
         if($(window).scrollTop()>$(window).height()){
               backBtn.fadeIn();
         }else{
               backBtn.fadeOut();
         }
    })
</script>

3 使用自定義鏈接錨記：

這種方法，就是使用的自定義鏈接錨記了，必須要定義錨記，然后使用超鏈接指向錨。

這種方法其實跟第二種方法差不多，只不過必須要額外定義一個鏈接錨記。

 4  href指向特定id：

這種方法是在頁面現有的標簽中，使用“返回頂部”的連接的href指向頂部具有id屬性的標簽，以實現返回頂部的功能。這種方法，需要在頁面頂部的標簽中有具有id屬性的標簽，來實現指向頂部。亦可自定義添加。

 5  使用簡單腳本：

這種方法也是最近知道的，可以設置scrollTo(0,0)中的x、y的值來跳轉到頁面的具體位置。

<a href="javascript:window.scrollTo( 0, 0 );" ></a>