美文网首页
回到顶部并且监听顶部按钮显示或隐藏

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

作者: 聂嘚吧嘚 | 来源:发表于2019-01-09 09:50 被阅读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');
            }
        }
    });
    

    相关文章

      网友评论

          本文标题:回到顶部并且监听顶部按钮显示或隐藏

          本文链接:https://www.haomeiwen.com/subject/zhkwrqtx.html