JavaScript 实现平滑返回顶部效果

以下是一个简单的 JavaScript 代码，用于实现页面平滑返回顶部效果：

// 获取返回顶部按钮
var topButton = document.getElementById('topButton');

// 当页面滚动时显示或隐藏返回顶部按钮
window.onscroll = function() {
    if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
        topButton.style.display = 'block';
    } else {
        topButton.style.display = 'none';
    }
};

// 当点击返回顶部按钮时平滑滚动到顶部
topButton.onclick = function() {
    // 获取当前滚动位置
    var scrollToTop = window.setInterval(function() {
        var pos = window.pageYOffset;
        if (pos > 0) {
            window.scrollTo(0, pos - 20); // 每次滚动20像素
        } else {
            window.clearInterval(scrollToTop);
        }
    }, 10);
};

要使用此代码，请将其添加到页面的 JavaScript 文件或标记中，并将 'topButton' 替换为您页面上实际的返回顶部按钮的 ID。

代码说明：

• 代码首先获取页面上的返回顶部按钮元素。
• 然后使用 window.onscroll 事件监听页面滚动，当滚动距离超过 20 像素时，显示返回顶部按钮；否则隐藏按钮。
• 当点击返回顶部按钮时，使用 window.setInterval 方法创建一个定时器，每隔 10 毫秒将页面滚动 20 像素，直到滚动到页面顶部。

通过以上步骤，即可实现一个简单的页面平滑返回顶部功能。

注意：

• 您可以根据需要调整代码中的滚动距离和滚动间隔。
• 请确保您的返回顶部按钮元素拥有正确的 ID 属性。

希望这篇文章对您有所帮助。如果您有任何疑问，请随时留言。