JavaScript制作缓慢返回顶部实现代码

  • A+
所属分类:Web前端

JavaScript制作缓慢返回顶部实现代码

制作思路

缓慢返回到顶部,这种特效很常见,需要先了解如何获取滚动条位置,然后通过判断 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>

 

补充

要获取当前页面的滚动条纵坐标位置,用: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;
}
牧某人

发表评论

您必须登录才能发表评论!