【返回顶部】JavaScript实现返回顶部功能

注意：window.scrollTo 方法的 behavior: 'smooth' 选项可能不在所有浏览器中都被支持。如果你需要确保在所有浏览器中都能平滑滚动，你可能需要使用其他库或自己实现平滑滚动的功能。

另外，document.body.scrollTop 和 document.documentElement.scrollTop 的使用是为了兼容不同的浏览器。在某些浏览器中，页面滚动的距离可能存储在 document.body.scrollTop 中，而在其他浏览器中则可能存储在 document.documentElement.scrollTop 中。

html代码：

 <div id="btn-top">
        <img src="images/top.jpg" alt="">
    </div>  

css代码：

#btn-top{
    width: 60px;
    height: 60px;
    border-radius: 50%;
    position: fixed;
    right: 30px;
    bottom: 100px;
    cursor: pointer;
    display: none;  
}
#btn-top img{
    border-radius: 50%;
}

js代码：

// 返回顶部按钮js
function BtnTop() {
    // 获取按钮元素  
    var btnTop = document.getElementById('btn-top');

    // 监听滚动事件  
    window.onscroll = function () {
        // 如果页面滚动距离大于0，显示按钮；否则隐藏按钮  
        if (document.body.scrollTop > 0 || document.documentElement.scrollTop > 0) {
            btnTop.style.display = 'block';
        } else {
            btnTop.style.display = 'none';
        }
    };

    // 为按钮添加点击事件  
    btnTop.onclick = function () {
        // 使用window.scrollTo方法平滑滚动到页面顶部  
        window.scrollTo({
            top: 0,
            behavior: 'smooth'
        });
    };
}