回到顶部并且监听顶部按钮显示或隐藏

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');
        }
    }
});
上一篇下一篇

猜你喜欢

热点阅读