IT博客汇
  • 首页
  • 精华
  • 技术
  • 设计
  • 资讯
  • 扯淡
  • 权利声明
  • 登录 注册

    原生JavaScript返回顶部

    Tokin发表于 2016-06-21 12:55:02
    love 0

    迁移到Zepto后,之前的返回顶部就失效了,想必是因为一些fade动画导致的,翻了一下返回顶部的代码,格式化完也就简单的几行,于是打算动手写一个原生的返回顶部。

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

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

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



沪ICP备19023445号-2号
友情链接