Loading.

原生JavaScript返回顶部

发布于 / 已有 105 条评论

HOME

这种简单的小功能思路很清晰,就是检测滚动条是不是在顶部,不是的话就显示返回顶部按钮,是的话就把它隐藏。

滚动条监测在新版的主流浏览器中是这样实现的:

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就可以了。

105条回应:“原生JavaScript返回顶部”

  1. 昌浩说道:

    为什么我这里是不管用的,返回顶部

  2. 澳门银座说道:

    排版很好看,简单大方,个人很喜欢

  3. 澳门银座说道:

    顶顶顶顶顶顶顶顶顶顶 非常不错

  4. 澳门银座说道:

    博主的文章写得非常棒 很喜欢

  5. Lynn说道:

    之前那个白色抬头的呢?改成现在这个样子了吗?好喜欢之前的,还在等着发布呢

  6. 尹先生说道:

    恭喜博主获得一级品域名QAQ

  7. Ethan说道:

    好棒,居然换了io的域名,我一直也想要,不知道买啥,,,_

  8. themebetter说道:

    模版很简洁,不错。

  9. 泽辉说道:

    咦,换域名啦,开始以为进错了,https://biji.io挺好记的

  10. shinelin说道:

    看了博主好多篇博文,真是有毅力!!
    自己马上要毕业了,感觉自己用不起阿里云主机了。
    于是乎,开始转静态博客hexo…….

发表评论

电子邮件地址不会被公开。 必填项已用*标注

    隐藏广告 沉浸模式 夜间模式
    自定义CSS