html部分
<div class="gotop"></div>
.gotop{position: fixed;width: 1rem;height: 1rem;z-index: 200;right: .3rem;bottom: 1.5rem;overflow: hidden;}
脚本部分
// 回到顶部
$('.gotop').click(function(){
var dealTop = $("body").offset().top;
$("html,body").scrollTo({toT:dealTop})
});
//平滑的回到顶部
$.fn.scrollTo =function(options){
var defaults = {
toT : 0, //滚动目标位置
durTime : 500, //过渡动画时间
delay : 30, //定时器时间
callback:null //回调函数
};
var opts = $.extend(defaults,options),
timer = null,
_this = this,
curTop = _this.scrollTop(),//滚动条当前的位置
subTop = opts.toT - curTop, //滚动条目标位置和当前位置的差值
index = 0,
dur = Math.round(opts.durTime / opts.delay),
smoothScroll = function(t){
index++;
var per = Math.round(subTop/dur);
if(index >= dur){
_this.scrollTop(t);
window.clearInterval(timer);
if(opts.callback && typeof opts.callback == 'function'){
opts.callback();
}
return;
}else{
_this.scrollTop(curTop + index*per);
}
};
timer = window.setInterval(function(){
smoothScroll(opts.toT);
}, opts.delay);
return _this;
};
展现方式一:
//向下滑动显示,向上滑动隐藏
var windowTop=0;
$(window).on("scroll", function(){
var scrolls = $(window).scrollTop();//获取当前可视区域距离页面顶端的距离
if(scrolls>=windowTop){//当B>A时,表示页面在向上滑动
//需要执行的操作
windowTop=scrolls;
$('.gotop').hide();
}else{//当B<a 表示手势往下滑动
//需要执行的操作
windowTop=scrolls;
$('.gotop').show();
}
if(scrolls==0){
$('.gotop').hide();
}
展示方式二:
//根据距离显示回到顶部图标
var h2_height = $(".searchbox").offset().top;//获取一个参考元素距离顶部距离
$(window).scroll(function(){
var this_scrollTop = $(this).scrollTop(); //获取当前可视区域距离页面顶端的距离
if(this_scrollTop>h2_height ){
$(".gotop").show();
}else{
$(".gotop").hide();
}
});
});