原生js制作缓慢返回顶部实现代码

制作思路

缓慢返回到顶部,这种特效很常见,需要先了解如何获取滚动条位置,然后通过判断 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.scrollLeftevent.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” 学习交流群:HelloWeb-学习交流群 196291215 共同交流并结识同行,在这里说出您的收获与感想或有什么不同的观点,我们期待您的留言,分享,让我们一起进步!

喜欢 ()or分享