js返回顶部

// HTML部分
<button id="backToTopBtn" title="返回顶部">Top</button>

// CSS部分
#backToTopBtn {
    display: none; /* 默认隐藏 */
    position: fixed; /* 固定位置 */
    bottom: 20px; /* 距离底部的距离 */
    right: 30px; /* 距离右侧的距离 */
    z-index: 99; /* 确保按钮在最上层 */
    border: none;
    outline: none;
    background-color: #555; /* 按钮背景色 */
    color: white; /* 文字颜色 */
    cursor: pointer; /* 鼠标悬停时显示为指针 */
    padding: 15px;
    border-radius: 10px; /* 圆角边框 */
}

#backToTopBtn:hover {
    background-color: #777; /* 鼠标悬停时的背景色 */
}

// JavaScript部分
window.onscroll = function() {scrollFunction()};

function scrollFunction() {
    if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
        document.getElementById("backToTopBtn").style.display = "block"; // 显示按钮
    } else {
        document.getElementById("backToTopBtn").style.display = "none"; // 隐藏按钮
    }
}

document.getElementById("backToTopBtn").onclick = function() {
    scrollToTop(800); // 800毫秒内平滑滚动到顶部
};

function scrollToTop(scrollDuration) {
    var scrollStep = -window.scrollY / (scrollDuration / 15),
        scrollInterval = setInterval(function(){
            if ( window.scrollY !== 0 ) {
                window.scrollBy( 0, scrollStep );
            } else {
                clearInterval(scrollInterval);
            }
        },15);
}