自建的博客,之前迟迟未能去将页面返回顶部按钮功能给完善,今天在写博客比较长时,下拉后往回返回时,好费事,要么点住浏览器的右边框慢慢拉上去,要么就鼠标拨轮一点点往回拨。鉴于本人对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)