如何实现页面滚动时显示回到顶部按钮？

你的回到顶部按钮逻辑存在几个问题，调整JS代码就能解决：

原代码的问题 #

• 未绑定页面滚动事件，当前代码仅在页面加载时执行一次，不会随滚动触发状态变更
• 错误读取了按钮自身的scrollTop值，实际需要判断的是页面整体的滚动距离
• 判断条件用===200过于严苛，只有滚动距离恰好等于200px时才触发，改用>=200能覆盖更多滚动场景

修正后的代码 #

HTML（无需修改） #

<a href="#" class="position-fixed text-danger arrow-up d-none" id="scrollTop"><i class="fas fa-3x fa-chevron-circle-up"></i></a>

JavaScript #

// 获取按钮元素
const scrollTopBtn = document.getElementById('scrollTop');

// 监听页面滚动事件
window.addEventListener('scroll', function() {
    // 获取页面垂直滚动距离（兼容不同浏览器）
    const scrollDistance = window.scrollY || document.documentElement.scrollTop;
    
    // 根据滚动距离切换按钮显示/隐藏类
    if (scrollDistance >= 200) {
        scrollTopBtn.classList.add('d-block');
        scrollTopBtn.classList.remove('d-none');
    } else {
        // 滚动回到顶部区域时隐藏按钮
        scrollTopBtn.classList.add('d-none');
        scrollTopBtn.classList.remove('d-block');
    }
});

额外优化：防抖处理 #

为避免滚动时频繁触发DOM操作，可添加防抖逻辑减少性能消耗：

const scrollTopBtn = document.getElementById('scrollTop');
let debounceTimer;

window.addEventListener('scroll', function() {
    clearTimeout(debounceTimer);
    debounceTimer = setTimeout(function() {
        const scrollDistance = window.scrollY || document.documentElement.scrollTop;
        if (scrollDistance >= 200) {
            scrollTopBtn.classList.add('d-block');
            scrollTopBtn.classList.remove('d-none');
        } else {
            scrollTopBtn.classList.add('d-none');
            scrollTopBtn.classList.remove('d-block');
        }
    }, 100); // 100ms延迟，可根据需求调整
});

内容的提问来源于stack exchange，提问作者Mahmoud Khoravi