制作思路

缓慢返回到顶部，这种特效很常见，需要先了解如何获取滚动条位置，然后通过判断 0 点位置，决定返回顶部，最后用一个定时器循环：

OK直接看代码：

CSS代码：

.box{height:1000px;text-align:center;font-size:200px;font-weight:bold;}
#back-up{border:1px solid red;width:37px;position:fixed;cursor:pointer;right:30px;bottom:30px;}

JS代码：

var currentPosition,timer;
function GoTop(){
    timer=setInterval("runToTop()",1);
}
function runToTop(){
    currentPosition=document.documentElement.scrollTop || document.body.scrollTop;
    currentPosition-=10;    /*调整滚动的值,值大小会影响速度*/
    if(currentPosition>0){
        window.scrollTo(0,currentPosition);
    }else{
        window.scrollTo(0,0);
        clearInterval(timer);
    }
}

Html代码：

<div class="box">B饭</div>
<div class="box">E吃</div>
<div class="box">W家</div>
<div class="box">O回</div>
<div class="box">L你</div>
<div class="box">L带</div>
<div class="box">E，</div>
<div class="box">H走</div>
<div id="back-up" onclick="GoTop()">返回顶部</div>
</body>

<script>
window.scrollTo(0,document.body.scrollHeight);//页面刷新定位在底部
</script>

补充

以下摘自：huang100qi

要获取当前页面的滚动条纵坐标位置，用：document.documentElement.scrollTop;

而不是：document.body.scrollTop;documentElement对应的是 html 标签，而 body 对应的是 body 标签。

在标准w3c下，document.body.scrollTop恒为0，需要用document.documentElement.scrollTop来代替;

如果你想定位鼠标相对于页面的绝对位置时，你会发现google里面1000篇文章里面有999.99篇会让你使用event.clientX+document.body.scrollLeft，event.clientY+document.body.scrollTop，如果你发现你的鼠标定位偏离了你的想象，请不要奇怪，这是再正常不过的事情。

ie5.5之后已经不支持document.body.scrollX对象了。

所以在编程的时候，请加上这样的判断

if(document.body && document.body.scrollTop && document.body.scrollLeft){
    top=document.body.scrollTop;
    left=document.body.scrollleft;    
}
if(document.documentElement && document.documentElement.scrollTop && document.documentElement.scrollLeft){
    top=document.documentElement.scrollTop;
    left=document.documentElement.scrollLeft;
}

原文链接：HelloWeb前端网 » 原生js制作缓慢返回顶部实现代码 » 感谢您的浏览，希望能有所帮助。

欢迎您加入“Helloweb” 学习交流群： 196291215 共同交流并结识同行，在这里说出您的收获与感想或有什么不同的观点，我们期待您的留言，分享，让我们一起进步！