如何修复自定义go to top按钮无法回到顶部的功能异常问题？

你的代码里有几个关键问题导致按钮点击后无法滚动到顶部，以下是修复方案：

核心错误点 #

downToUp函数中错误使用了window.pageXOffset——这个属性获取的是水平方向的滚动偏移量，而我们需要判断的是垂直方向的滚动状态，应该用window.pageYOffset。

其他优化与修正 #

1. 严格模式语法错误：'use-strict'缺少空格，正确写法是'use strict'，否则严格模式不会生效。
2. 性能优化：用requestAnimationFrame替代setTimeout(..., 0)，让滚动动画更平滑，同时避免浏览器性能浪费。
3. 简化显示逻辑：按钮显示/隐藏的第二个if可以改成else，减少不必要的条件判断。

修复后的完整代码 #

(function() {
    'use strict'

    function checkScroll() {
        let scrolled = window.pageYOffset;
        let coords = document.documentElement.clientHeight;

        if (scrolled > coords) {
            goTopBtn.classList.add('up_show');
        } else {
            goTopBtn.classList.remove('up_show');
        }
    }

    function downToUp() {
        if (window.pageYOffset > 0) {
            window.scrollBy(0, -80);
            requestAnimationFrame(downToUp);
        }
    }

    let goTopBtn = document.querySelector(".down_to_up");

    window.addEventListener('scroll', checkScroll);
    goTopBtn.addEventListener('click', downToUp);
})();

额外说明 #

• 如果滚动动画仍然不够流畅，可以调整scrollBy的第二个参数（比如改成-50），数值越小滚动越慢越平滑。
• 确保你的.up_show类已经正确设置了按钮的显示样式（比如display: block或opacity: 1），否则按钮可能不会正常显示。

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