js实现一键回顶部

<button id="back-to-top" title="Go to top">Top</button>

#back-to-top {
    display: none; /* 默认隐藏 */
    position: fixed; /* 固定位置 */
    bottom: 20px;
    right: 30px;
    z-index: 99;
    font-size: 18px;
    border: none;
    outline: none;
    background-color: #555;
    color: white;
    cursor: pointer;
    padding: 15px;
    border-radius: 4px;
}

#back-to-top:hover {
    background-color: #777;
}

window.onscroll = function() {scrollFunction()};

function scrollFunction() {
    if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
        document.getElementById("back-to-top").style.display = "block";
    } else {
        document.getElementById("back-to-top").style.display = "none";
    }
}

document.getElementById("back-to-top").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);
}