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

html:


 

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');
        }
    }
});

你可能感兴趣的:(回到顶部并且监听顶部按钮显示或隐藏)