當頁面過長時，通常會在頁面下方有一個返回頂部的button，總結一下，大概三種實現方法，下面說下各方法及優缺點。
方法一 錨點定位
<a href="#" class="top" id="top">返回頂部</a>這種方法設置方便，但缺點是會刷新頁面（我是在同事的樂視手機上發現的）。
方法二 window.scrollTo(x,y)
<a href="javascript:scrollTo(0,0)" class="top" id="top">返回頂部</a>這種方法也很方便，並且不會刷新頁面，缺點是沒有滾動效果。
scrollTo接收的參數用來定位視口左上角在整個滾動內容區域的坐標，比如我設置scrollTo(100,100)，就是讓滾動內容的坐標（100,100）的點處在視口的左上角。
方法三 設置帶有動畫效果的滾動
原生方法
/* html部分 */ <body> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <a href="javascript:;" class="top" id="top">返回頂部</a> </body><style> /* css部分 */ div { height: 150px; } div:nth-child(odd) { background-color: #8ae238; } div:nth-child(even) { background-color: #66d9ef; } .top { position: fixed; right: 50px; bottom: 50px; display: block; width: 50px; height: 50px; font-size: 20px; background-color: white; display: none; } </style><script> /* js代碼 */ var topBtn = document.getElementById('top'); // 獲取視窗高度 var winHeight = document.documentElement.clientHeight; window.onscroll = function () { // 獲取頁面向上滾動距離，chrome瀏覽器識別document.body.scrollTop，而火狐識別document.documentElement.scrollTop，這里做了兼容處理 var toTop = document.documentElement.scrollTop || document.body.scrollTop; // 如果滾動超過一屏，返回頂部按鈕出現，反之隱藏 if(toTop>=winHeight){ topBtn.style.display = 'block'; }else { topBtn.style.display = 'none'; } } topBtn.onclick=function () { var timer = setInterval(function () { var toTop = document.documentElement.scrollTop || document.body.scrollTop; // 判斷是否到達頂部，到達頂部停止滾動，沒到達頂部繼續滾動 if(toTop == 0){ clearInterval(timer); }else { // 設置滾動速度 var speed = Math.ceil(toTop/5); // 頁面向上滾動 document.documentElement.scrollTop=document.body.scrollTop=toTop-speed; } },50); } </script>大概的思路就是：
- 為window綁定scroll事件，監聽頁面滾動距離，當超過一屏高度時，顯示返回頂部的按鈕
- 為按鈕綁定點擊事件，返回頂部的方法就是獲取頁面滾動的距離，然后計算步長，這里采用滾動距離除以5的方式，滾動速度由快到慢。這里使用定時器控制滾動的頻率，建議設置較小一點的值，如果時間間隔過大會有‘跳幀’的感覺。
這種方法優點是有了動畫效果，只是實現起來比較麻煩，下面介紹一下jQuery方法。
jQuery方法
jQuery方法只是在js代碼部分不同，具體代碼如下
<script> /* js代碼 */ $(window).on('scroll', function () { // 判斷顯示還是隱藏按鈕 if($(this).scrollTop()>=$(this).height()){ $('#top').fadeIn('slow'); }else { $('#top').fadeOut('slow'); } }); $('#top').on('click',function () { // 設置滾動動畫，這里注意使用的是$('body')不是$(window) $('body').animate({scrollTop:'0'},500); }); </script>jQuery方法的優點是方便，而且動畫效果比較流暢。
這里需要注意設置animate方法時使用的是jQuery封裝的body對象而不是window對象，因為我們是要設置body的scrollTop屬性。
總結
三個方法各有優劣，不過總體來講，jQuery的方法更適合大多數場景。