背景介绍
当页面内容很多的时候，用户可能会始终往下滑动页面。然而当他想返回页面顶部进行其余操作时，他可能须要一直滚动鼠标滚轮，这就导致用户体验将很差。鉴于这种状况， “回到顶部”这一性能便呈现了。
现在在咱们浏览网站的时候，经常能遇见“回到顶部”这个按钮。目前支流的回到页面顶局部体现为两种，一种是间接回到页面的顶部，这种形式简略粗犷；另外一种则是主动滚动间接回到页面顶部，这样一来视觉体验上可能更好，然而用户须要过几秒能力看到顶部内容。
例如掘金，在滚动到肯定高度时会呈现“回到顶部”按钮，点击后会间接回到页面顶部，就是上文说到的第一种状况。
实现
动态显示滚动按钮
“回到顶部”并不是始终显示的，而是滚动到肯定值才呈现的，因而应该在window.onscroll里定义一个判断事件。
window.onscroll = function () { var currentHeight = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop; // 页面滚动超过300px就显示 if (currentHeight > 300) { document.getElementById('backtop').style.display = 'block' } else { document.getElementById('backtop').style.display = 'none' }}间接回到顶部
锚点
最简略的办法。给顶部的div一个id，点击间接回到这个div元素，然而URL上会呈现#top。
<div id="top"></div>......<a href="#top">回到顶部</a>scrollTo函数
管制滚动条回到指定地位，第一个参数是间隔页面左端的间隔，第二个参数是间隔页面顶部的间隔。
<a href="javascript:scrollTo(0, 0)">回到顶部</a>scrollTop函数
管制滚动条垂直偏移。
<a onclick="byScrollTop()">回到顶部</a>......function byScrollTop() { document.documentElement.scrollTop = 0; window.pageYOffset = 0; // 兼容ios document.body.scrollTop = 0; // 兼容低版本ie}scrollBy函数
该办法可把内容滚动指定的像素数。第一个参数指向右滚动的像素，第二个参数指向下滚动的参数，正数可使方向相同。
<a onclick="byScrollBy()">回到顶部</a>......function byScrollBy() { var topHeight = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop; scrollBy(0, -topHeight);}间接回到顶部
定时器实现滚动动画
通过定时器实现固定速度的主动滚动动画成果。然而这样会有个问题，就是当页面内容非常多的时候，这个时候离顶部曾经有很长一段距离了。如果还是一个固定速度的话，可能会长达10秒钟，这对用户体验来说是不敌对的。
<a onclick="scrollToTop()">回到顶部</a>......function scrollToTop() { var topHeight = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop; scrollBy(0, -100); // 模仿鼠标向上滚动事件 scrolldelay = setTimeout('scrollToTop()', 50); // 革除滚动事件，防止无奈向下挪动 if (topHeight === 0) { clearTimeout(scrolldelay); scrolldelay = null; }}定时器实现滚动动画-改良版
基于下面这个问题，咱们能够设置一个速度的最小值，让滚动速度从快到慢，但也不至于过慢。
function scrollToTop() { var topHeight = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop; var speed = topHeight / 10 > 100 ? topHeight / 10 : 100; scrollBy(0, -speed); // 模仿鼠标向上滚动事件 scrolldelay = setTimeout('scrollToTop()', 50); // 革除滚动事件，防止无奈向下挪动 if (topHeight === 0) { clearTimeout(scrolldelay); scrolldelay = null; }}最终成果
残缺代码
<style> a { display: block; } #top { height: 2000px; background-color: #999 } #backtop { display: none; position: fixed; bottom: 20px; right: 30px; background-color: #fff; z-index: 9; }</style><body> <div id="top"> 这里是页面顶部 </div> <div id="backtop"> <a href="#top">回到顶部-锚点</a> <a href="javascript:scrollTo(0, 0)">回到顶部-scrollTo函数</a> <a onclick="byScrollTop()">回到顶部-scrollTop函数</a> <a onclick="byScrollBy()">回到顶部-scrollBy函数</a> <a onclick="scrollToTop()">回到顶部-定时器动画版</a> </div> <script> window.onscroll = function () { var currentHeight = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop; console.log(currentHeight, "currentHeight"); if (currentHeight > 300) { document.getElementById('backtop').style.display = 'block' } else { document.getElementById('backtop').style.display = 'none' } } function byScrollTop() { document.documentElement.scrollTop = 0; window.pageYOffset = 0; // 兼容ios document.body.scrollTop = 0; // 兼容低版本ie } function byScrollBy() { var topHeight = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop; scrollBy(0, -topHeight); } function scrollToTop() { var topHeight = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop; var speed = topHeight / 10 > 100 ? topHeight / 10 : 100; scrollBy(0, -speed); // 模仿鼠标向上滚动事件 scrolldelay = setTimeout('scrollToTop()', 50); // 革除滚动事件，防止无奈向下挪动 if (topHeight === 0) { clearTimeout(scrolldelay); scrolldelay = null; } } </script></body>