这种简单的小功能思路很清晰,就是检测滚动条是不是在顶部,不是的话就显示返回顶部按钮,是的话就把它隐藏。
滚动条监测在新版的主流浏览器中是这样实现的:
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
就可以了。
为什么我这里是不管用的,返回顶部
排版很好看,简单大方,个人很喜欢
顶顶顶顶顶顶顶顶顶顶 非常不错
博主的文章写得非常棒 很喜欢
之前那个白色抬头的呢?改成现在这个样子了吗?好喜欢之前的,还在等着发布呢
@Lynn
白色的抬头?哪个部分?
恭喜博主获得一级品域名QAQ
@尹先生
可是是已备案的,心伤,还得想办法注销备案然后再自己备案
好棒,居然换了io的域名,我一直也想要,不知道买啥,,,_
@Ethan
好像io域名是个低调的后缀,以为很冷门,注册的时候发现跟com一样,想到的都没了
模版很简洁,不错。
咦,换域名啦,开始以为进错了,https://biji.io挺好记的
@泽辉
哈哈,就是看着眼晕
看了博主好多篇博文,真是有毅力!!
自己马上要毕业了,感觉自己用不起阿里云主机了。
于是乎,开始转静态博客hexo…….
@shinelin
可以考虑一下别的主机啊,hexo静态的玩的感觉不舒服,尤其是没有原生的评论系统
@Tokin 阿里云一年6月虚拟主机等你
@Magic 虚拟主机不符合我爵士身份
@Tokin
我是国王