标签：web element url css 边框 判断 ceil 返回顶部 ntb
自建的博客，之前迟迟未能去将页面返回顶部按钮功能给完善，今天在写博客比较长时，下拉后往回返回时，好费事，要么点住浏览器的右边框慢慢拉上去，要么就鼠标拨轮一点点往回拨。鉴于本人对js不熟，虽然在各位大佬看来可能很小儿科，但是我还是贴上来留个记录，供自己学习。
HTML部分：
1 <!--返回顶部--> 2 <div class="fixed-top"> 3 <a id="btn_top" class="gotop" title="返回顶部"></a> 4 </div>
CSS部分：
1 div.fixed-top { 2 padding: 0; 3 background-color: #ffffff; 4 } 5 div.fixed-top a.gotop { 6 background: url("/static/totop.png") no-repeat center center; 7 width: 46px; 8 height: 46px; 9 border-radius: 50%; 10 position: fixed; 11 right: 25px; 12 bottom: 25px; 13 -webkit-transition: all .2s ease-in-out; 14 cursor: pointer; 15 background-color: #ffffff; 16 color: #fff; 17 z-index: 99998; 18 }
JavaScript部分：
1 // ===================返回顶部js代码====================== 2 // onload事件 3 window.onload = function () { 4 // 获取id元素 5 var obtn = document.getElementById("btn_top"); 6 var isTop = true; 7 var timer = null; 8 // 获取页面可视高度 9 var clientHeight = document.documentElement.clientHeight||document.body.clientHeight; 10 11 // onscroll滚动条滚动时触发 12 window.onscroll = function () { 13 // 在滚动的时候添加判断 14 var topH = document.documentElement.scrollTop||document.body.scrollTop; 15 if(topH > clientHeight) { 16 obtn.style.display = "block"; 17 }else { 18 obtn.style.display = "none"; 19 } 20 } 21 22 // 按钮点击时触发 23 obtn.onclick = function () { 24 // 设置定时器：setInternal会不停地调用函数，直到clearInterval被调用或者窗口被关闭 25 timer = setInterval(function () { 26 // 获取滚动条距离顶部的高度 27 var topH = document.documentElement.scrollTop||document.body.scrollTop; 28 // 设置滚动速度，使用Math的ceil，对数进行上舍入 29 var stepLength = Math.ceil(topH/6); 30 document.documentElement.scrollTop=document.body.scrollTop=topH-stepLength; 31 isTop = true; 32 // 判断滚动条是否为0，并触发clearInterval函数，结束setInternal作用 33 if(topH == 0) { 34 clearInterval(timer); 35 } 36 }, 30); 37 } 38 }
到这里，还要小结一下，在中间我们运用的知识点：
知识点回顾：
DOM：
1、document.getElementById()
2、document.documentElement.scrollTop
3、document.body.scrollTop
事件：
1、window.onload
2、window.onscroll
3、obtn.onclick
定时器的使用：
1、setInterval(function(){},30)
2、clearInterval(timer)
标签：web element url css 边框 判断 ceil 返回顶部 ntb
原文地址：https://www.cnblogs.com/cpl9412290130/p/10179675.html
