这种简单的小功能思路很清晰,就是检测滚动条是不是在顶部,不是的话就显示返回顶部按钮,是的话就把它隐藏。
滚动条监测在新版的主流浏览器中是这样实现的:
document.body.scrollTop
如果想要兼容IE,那么可以加入下面这句完成:
document.documentElement.scrollTop
上面就是最主要的代码了,但是想要实现实时的监测滚动条的位置,我们还需要一个window.onscroll
才能完成,这样不断下拉会不断刷新滚动条的位置。
说道这里,你大概已经可以试着写出返回顶部这个功能了。
贴出我的代码吧:
HETM
<a class="back2top" style="display:none;"></a>
CSS
.back2top {z-index:99;background:#000;width:36px;height:36px;display:block;position:fixed;right:20px;bottom:20px;cursor:pointer;border-radius:2px;opacity:.6;}
.back2top:before {content:"";position:absolute;right:8px;top:10px;border-left:10px solid transparent;border-right:10px solid transparent;border-bottom:15px solid #fff;}
JavaScript
window.onscroll=function(){
var goTop = document.getElementsByClassName("back2top");
if(goTop.length>0){
goTop[0].style.display = document.documentElement.scrollTop >= 200 || document.body.scrollTop >= 200 ? 'block':'none';
goTop[0].onclick=function(){
document.body.scrollTop=0;
document.documentElement.scrollTop=0;
}
}
}
getElementsByClassName
可能不兼容IE8,如果想向下兼容,可以尝试用getElementById
就可以了。
请问博主现在用的这个是什么字体呀? 😆
@mashiro 英文字体是EXO-2
@Tokin 收到,谢谢~
博主写的这个是直接返回没有缓动 😈
@Magic 不需要缓动,影响效率
@Tokin ➡ 哈哈
无论是JQ还是JS,我觉得都挺要命的。。。。 完全看不懂 🙂
💡 楼主的代码在WordPress是如何插入的呀?
JS写起来还是蛮好玩的 不过公司都是用JQ 😐
@Weidan 还是jq写起来顺手啊
为了省事我用了 jQ 写,其实也不错,就是要加载一个 jQ 库有点郁闷。
@阿歪 jq很方便,我现在也用jq写- –