您好,欢迎访问一九零五行业门户网

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

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

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程序设计有所帮助。
其它类似信息

推荐信息