在項目中我們經常有需求要求頁面滾動到一定位置時出現返回頂部按鈕，點擊即返回頂部。
方法一： 錨點，這是最簡單的。（a標簽的href屬性等於一直要到達位置元素的id值）
方法二： js直接給頁面根節點設置scrollTop為0。
// 兼容寫法 document.body.scrollTop = 0； document.documentElement.scrollTop = 0;
But，以上都是直接返回，不帶任何過渡效果。作為有追求的前端，這太low了。
以下提供兩種帶過渡效果的原生方法和一種jquery方法：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> li { height: 100px;border-bottom: 1px solid #ccc; } #toTop {display: none;position: fixed;right: 20px;bottom: 20px; background: #ccc; border-radius: 5px;padding: 10px 15px;} </style> </head> <body> <div class="demo" style="height: 2000px;"> <ul> <li>demo1</li> <li>demo2</li> <li>demo3</li> <li>demo4</li> <li>demo5</li> <li>demo6</li> <li>demo7</li> <li>demo8</li> <li>demo9</li> <li>demo10</li> </ul> </div> <div id="toTop">back</div> </body> </html>
<script>
// 勻速返回 （定時器開啟前速度已經計算好） var toTop = document.querySelector('#toTop') toTop.onclick = function(){ var dom = document.querySelector('body'); var h = dom.scrollTop; var subH = parseInt(h / 50); var timer = setInterval(function(){ h -= subH; if(h <= 0){ dom.scrollTop = 0; clearInterval(timer); }else{ dom.scrollTop = h; } },1) } window.onscroll = function(){ if(window.pageYOffset>300){ toTop.style.display = "block"; }else{ toTop.style.display = "none"; } } </script>
function goTop() {
// 由快到慢 （每次開啟定時器都重新計算速度） timer = setInterval( function(){ //獲取滾動條的滾動高度 var scrollTop = document.documentElement.scrollTop || document.body.scrollTop; //用於設置速度差，產生緩動的效果 var speed = Math.floor(-scrollTop / 8); document.documentElement.scrollTop = document.body.scrollTop = scrollTop + speed;//用純數字賦值 isTop =true; //用於阻止滾動事件清除定時器 if(scrollTop == 0){ clearInterval(timer); } },50 ); }
另外，jQuery實現方式如下
<script> $(function(){ $(window).on("scroll",function(){ var display = window.pageYOffset > 300 ? "block" : "none"; $("#toTop").css("display",display); }); $("#toTop").on("click",function(){ $("body").animate({ "scrollTop": 0 },300); }) }) </script>