当页面过长时，通常会在页面下方有一个返回顶部的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的方式，滚动速度由快到慢。这里使用定时器控制滚动的频率，建议设置较小一点的值，如果时间间隔过大会有‘跳帧'的感觉。
新闻热点
疑难解答
图片精选
