使用jquery做一个回到顶部按钮

本文章著作权归没梦想的咸鱼丶所有,转载须说明来源

产生需求

  • 当页面过长的时候,我们回到页面顶部如果还是拖拉滚动条那就有点太麻烦了,所以这个时候我就需要一个一键回到顶部的功能。
  • 有了这个想法之后,那我们就需要明确这个功能jquery能实现它吗?想了想jquery不是有scrollTop这个方法可以控制滚动条吗?所以答案那是肯定的,以下就是我们实施的过程 。
    • 明确开发思路
    • 开始我们要判断下拉到什么位置时需要把这个时候把goTop键展现出来
    • 接着当我们点击回到顶部之后,这个键肯定是需要隐藏的(显得智能点)
    • 这里面涉及到2个事件需要我们监听(滚动条的位置以及goTop键的点击)
    • 通过思路我们知道肯定是要用到scrollTop() show() hide()这3个方法

开始撸代码

  1. 把这个键插入到HTML中,为什么不直接在HTML中写呢?主要我们既然是使用js来做这个事,那最好就一切都用js代码来操作,不互相耦合,以后即使我们要修改那也只需要改js代码就好了,不关HTML任何事。
    var $goTop=$('<div id="to-top">回到顶部</div>');    
        $('body').append($goTop)
  1. 监听事件,我设置的是当滚动条滚动到超过100之后就展示滚动条,否则都是出于隐藏状态。另外当点击goTop键之后立马把滚动条设置为0回到最顶部。
$(window).on('scroll',function(){
            var  $scrollTop=$('body').scrollTop();
            if ($scrollTop>100) {
                $('#to-top').show();
            }else{
                $('#to-top').hide();
            }
        })
        $('#to-top').on('click',function(){
            $(window).scrollTop(0);
        })
  1. 另外插入goTop的css需要自己设置样式,毕竟不同页面样式肯定也会有不同

优化优化

简单的功能我们是做出来了,但还有一些bug,而且这样功能其实我们只要做一次就够了 ,以后直接拿来用。所以还需要封装下。

var GoTop={
    init:function(){
        if ($('#to-top').length>0) { return }//如果已经插入过元素一次就不需要做第二次了
        var $goTop=$('<div id="to-top">回到顶部</div>');
        $('body').append($goTop); 
        this.$goTop=$goTop; 
              //把这个节点赋值为对象属性,以后修改的时候只需要修改这部分就好了
        this.bind();
    },
    bind:function(){
        var me=this;
        $(window).on('scroll',function(){
            var  $scrollTop=$('body').scrollTop();
            if ($scrollTop>100) {
                me.$goTop.show(); //这里this已经发生了改变,所以用变量me保存了下
            }else{
                me.$goTop.hide();
            }
        })
        this.$goTop.on('click',function(){
            $(window).scrollTop(0);
        })
    }
}
  
GoTop.init(); 每次只需要调用这个方法就好了,而且即使执行多次也只需要插入一个按钮       

推荐阅读更多精彩内容