javascript返回顶部的按钮实现方法

时间:2021-05-26

本文实例介绍了javascript返回顶部的按钮实现方法,分享给大家供大家参考,具体内容如下

html:

<a href="javascript:;" id="btn" title="回到顶部"></a>

css:

#btn{position:fixed;display:none;}

script:

获取滚动条高度:document.documentElement.scrollTop || document.body.scrollTop

获取可视区高度:document.documentElement.clientHeight
js代码

window.onload = function(){ var obtn = document.getElementById('btn'); //获取页面可视区的高度 var clientHeight = document.documentElement.clientHeight; var timer = null; var isTop = true; window.onscroll = function(){ var osTop = document.documentElement.scrollTop || document.body.scrollTop; if (osTop >= clientHeight){ //显示按钮 obtn.style.display = 'block'; }else { //隐藏按钮 obtn.style.display = 'none'; } if (!isTop){ clearInterval(timer); } isTop = false; }; obtn.onclick = function(){ //设置定时器 timer = setInterval(function(){ //获取滚动条距离顶部的高度 var osTop = document.documentElement.scrollTop || document.body.scrollTop; var ispeed = Math.floor(-osTop / 6); document.documentElement.scrollTop = document.body.scrollTop = osTop +ispeed; isTop = true; if (osTop === 0){ clearInterval(timer); } },30); };};

希望本文所述对大家学习javascript程序设计有所帮助。

声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。

相关文章