javascript返回顶部效果(自写代码)

当然，下面是一个简单的JavaScript实现返回顶部效果的代码示例。这段代码会在页面上添加一个按钮，当用户点击这个按钮时，页面会平滑地滚动到顶部。

// 定义一个函数，用于实现平滑滚动到页面顶部的效果
function scrollToTop() {
    // 获取当前页面的滚动条垂直位置
    var currentScroll = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0;

    // 每次滚动间隔的时间
    var scrollSpeed = -Math.max(currentScroll / 10, 20);

    // 使用window.requestAnimationFrame()来实现平滑滚动
    window.requestAnimationFrame(function() {
        // 更新滚动条位置
        window.scrollTo(0, currentScroll + scrollSpeed);

        // 如果还没有滚动到顶部，则继续调用该函数
        if (currentScroll + scrollSpeed > 0) {
            scrollToTop();
        }
    });
}

// 在页面加载完成后，添加一个返回顶部的按钮，并为其绑定点击事件
document.addEventListener('DOMContentLoaded', function() {
    // 创建一个返回顶部的按钮，并添加到body的末尾
    var backToTopButton = document.createElement('button');
    backToTopButton.textContent = '返回顶部';
    backToTopButton.style.position = 'fixed';
    backToTopButton.style.bottom = '20px';
    backToTopButton.style.right = '20px';
    backToTopButton.style.zIndex = '1000';
    backToTopButton.style.cursor = 'pointer';
    backToTopButton.style.padding = '10px 20px';
    backToTopButton.style.backgroundColor = '#007BFF';
    backToTopButton.style.color = 'white';
    backToTopButton.style.border = 'none';
    backToTopButton.style.borderRadius = '5px';
    backToTopButton.onclick = scrollToTop; // 绑定点击事件

    document.body.appendChild(backToTopButton);
});

这段代码首先定义了一个`scrollToTop`函数，该函数通过不断调用`window.requestAnimationFrame`来实现平滑滚动的效果。然后，在页面加载完成后，它会在页面的右下角添加一个“返回顶部”的按钮，并为该按钮绑定了点击事件，当点击该按钮时，会调用`scrollToTop`函数来实现返回顶部的功能。