jQuery返回顶部按钮未滚动页面即显示问题求助

嘿，我一眼就瞅出问题所在啦！你的代码只在滚动事件触发时才会执行显示/隐藏按钮的判断，但页面刚加载完成的时候，滚动事件还没被触发——这时候按钮的初始状态就完全看你的CSS设置，如果默认是显示状态，那它自然会一直露在那儿，直到你第一次滚动页面。

要彻底修复这个问题，我们只需要做两件小事：

• 给按钮设置初始隐藏状态
• 在页面加载完成后，立即执行一次滚动判断逻辑，确保初始状态正确

修改后的完整代码 #

jQuery(document).ready(function($){ 
    // 初始化：先隐藏按钮（也可以用CSS设置，后面会说）
    $('.TopButton').hide();

    // 把判断逻辑封装成函数，方便复用
    function toggleTopButton() {
        if ($(window).scrollTop() > 100) { 
            $('.TopButton').fadeIn(); 
        } else { 
            $('.TopButton').fadeOut(); 
        }
    }

    // 页面加载完成后立刻执行一次判断，确保初始状态正确
    toggleTopButton();

    // 滚动页面时触发判断
    $(window).scroll(function(){ 
        toggleTopButton();
    }); 

    // 点击按钮返回顶部的逻辑不变
    $('.TopButton').click(function(){ 
        $('html, body').animate({scrollTop : 0},360); 
        return false; 
    }); 
}); 

额外优化建议 #

你也可以直接在CSS里设置按钮的初始隐藏状态，这样就算JS加载稍慢，按钮也不会一开始就蹦出来，用户体验更顺滑：

.TopButton {
    display: none;
    /* 你的其他样式代码 */
}

内容的提问来源于stack exchange，提问作者Albano Albanese