回到顶部并且监听顶部按钮显示或隐藏
2019-01-09 本文已影响0人
聂嘚吧嘚
html:
<!--pc端按钮-->
<div id="top" class="top" ><img src="../../img/pc/top.png" alt=""></div>
<!--移动端端按钮-->
<div id="top2" class="top2"><img src="../../img/pc/top2.png" alt=""></div>
js:
/**
* 点击top按钮回到顶部
*/
$('#top,#top2').on('click',function () {
$("html, body").animate({scrollTop: 0 }, {duration: 500,easing: "swing"});
return false;
});
/**
* 监听页面
* */
$(window).bind('scroll',function(){
if(window.innerWidth >= 768){
var len=$(this).scrollTop();
if(len>=100){
//显示回到顶部按钮
$('#top').fadeIn('1000');
}else{
//影藏回到顶部按钮
$('#top').fadeOut('1000');
}
}else {
var len=$(this).scrollTop();
if(len>=100){
//显示回到顶部按钮
$('#top2').fadeIn('1000');
}else{
//影藏回到顶部按钮
$('#top2').fadeOut('1000');
}
}
});