在项目中我们经常有需求要求页面滚动到一定位置时出现返回顶部按钮，点击即返回顶部。
方法一： 锚点，这是最简单的。（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>