返回首页 | 一键访问 | 收藏本站 | 免费素材分享QQ群:1023538014

当前位置:首页 > JS代码 > 返回顶部 > 可变透明度的jQuery响应式返回顶部代码
下载地址

可变透明度的jQuery响应式返回顶部代码

可变透明度的jQuery响应式返回顶部代码,如果向下滚动超过1200像素,按钮的透明度会下降,减少视觉干扰,更便于浏览内容主体,非常贴心的用户体验,而且当屏幕视口缩小时,返回顶部按钮会自动缩放,适合响应式网站使用,兼容主流浏览器,花米素材推荐下载!

jQuery(document).ready(function($){
varoffset=300,
offset_opacity=1200,
scroll_top_duration=700,
$back_to_top=$('.cd-top');
$(window).scroll(function(){
($(this).scrollTop()>offset)?$back_to_top.addClass('cd-is-visible'):$back_to_top.removeClass('cd-is-visiblecd-fade-out');
if($(this).scrollTop()>offset_opacity){
$back_to_top.addClass('cd-fade-out');
}
});
$back_to_top.on('click',function(event){
event.preventDefault();
$('body,html').animate({
scrollTop:0,
},scroll_top_duration
);
});
});

可变透明度的jQuery响应式返回顶部代码

«
»
花米素材免费素材网