本文章著作权归没梦想的咸鱼丶所有，转载须说明来源
产生需求
- 当页面过长的时候，我们回到页面顶部如果还是拖拉滚动条那就有点太麻烦了，所以这个时候我就需要一个一键回到顶部的功能。
- 有了这个想法之后，那我们就需要明确这个功能jquery能实现它吗？想了想jquery不是有
scrollTop这个方法可以控制滚动条吗？所以答案那是肯定的，以下就是我们实施的过程 。- 明确开发思路
- 开始我们要判断下拉到什么位置时需要把这个时候把goTop键展现出来
- 接着当我们点击回到顶部之后，这个键肯定是需要隐藏的（显得智能点）
- 这里面涉及到2个事件需要我们监听（滚动条的位置以及goTop键的点击）
- 通过思路我们知道肯定是要用到
scrollTop() show() hide()这3个方法
开始撸代码
- 把这个键插入到HTML中，为什么不直接在HTML中写呢？主要我们既然是使用js来做这个事，那最好就一切都用js代码来操作，不互相耦合，以后即使我们要修改那也只需要改js代码就好了，不关HTML任何事。
var $goTop=$('<div id="to-top">回到顶部</div>');
$('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=$('<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(); 每次只需要调用这个方法就好了,而且即使执行多次也只需要插入一个按钮
