使用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)

2. 监听事件，我设置的是当滚动条滚动到超过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);
        })

3. 另外插入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(); 每次只需要调用这个方法就好了,而且即使执行多次也只需要插入一个按钮