jquery 页面滚动条回到顶部_使用jquery做一个回到顶部按钮

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

产生需求

当页面过长的时候，我们回到页面顶部如果还是拖拉滚动条那就有点太麻烦了，所以这个时候我就需要一个一键回到顶部的功能。

有了这个想法之后，那我们就需要明确这个功能jquery能实现它吗？想了想jquery不是有scrollTop这个方法可以控制滚动条吗？所以答案那是肯定的，以下就是我们实施的过程 。

明确开发思路

开始我们要判断下拉到什么位置时需要把这个时候把goTop键展现出来

接着当我们点击回到顶部之后，这个键肯定是需要隐藏的(显得智能点)

这里面涉及到2个事件需要我们监听(滚动条的位置以及goTop键的点击)

通过思路我们知道肯定是要用到scrollTop() show() hide()这3个方法

开始撸代码

把这个键插入到HTML中，为什么不直接在HTML中写呢？主要我们既然是使用js来做这个事，那最好就一切都用js代码来操作，不互相耦合，以后即使我们要修改那也只需要改js代码就好了，不关HTML任何事。

var $goTop=$('

回到顶部

');

$('body').append($goTop)

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

})

另外插入goTop的css需要自己设置样式，毕竟不同页面样式肯定也会有不同

优化优化

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

var GoTop={

init:function(){

if ($('#to-top').length>0) { return }//如果已经插入过元素一次就不需要做第二次了

var $goTop=$('

回到顶部

');

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