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

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');
        }
    }
});
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容