下面是关于如何让JavaScript滚动条回到顶部的完整攻略：

1. 使用window.scrollTo()方法

window.scrollTo()方法是一个JavaScript的内置方法，当我们需要将窗口的滚动条回到页面顶部时，可以使用该方法。

// 将滚动条回到页面顶部
window.scrollTo(0, 0);

上述代码将会把窗口滚动条移动到页面的顶部。其中，第一个参数表示了滚动条水平方向的偏移量，而第二个参数表示了垂直方向的偏移量。在这里，我们把这两个值都设置为0，表示让滚动条回到最顶部。

2. 使用document.documentElement.scrollTop属性

除了直接使用window.scrollTo()方法将滚动条回到顶部外，还可以使用document.documentElement.scrollTop属性来实现。

// 将滚动条回到页面顶部
document.documentElement.scrollTop = 0;

上述代码将会把文档的根元素（也就是HTML元素）的scrollTop属性设置为0，从而让滚动条回到最顶部。

示例

下面是一个针对网页底部的“回到顶部”按钮的示例代码，其使用了上述的两种方法：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>回到顶部示例</title>
  <style>
    #back-to-top{
        position: fixed;
        bottom: 30px;
        right: 30px;
        width: 40px;
        height: 40px;
        line-height: 40px;
        text-align: center;
        font-size: 18px;
        background-color: #333;
        color: #fff;
        border: none;
        cursor: pointer;
        display: none;
    }
  </style>
</head>
<body>
  <!-- 滚动条到达一定高度时，显示回到顶部按钮 -->
  <div id="back-to-top">回到顶部</div>

  <script>
    var backToTopBtn = document.getElementById('back-to-top');

    // 当滚动条的位置大于等于500时，显示回到顶部的按钮
    window.onscroll = function(){
        if(document.documentElement.scrollTop >= 500){
            backToTopBtn.style.display = 'block';
        }else{
            backToTopBtn.style.display = 'none';
        }
    };

    // 点击回到顶部按钮，将滚动条回到页面顶部
    backToTopBtn.onclick = function(){
        window.scrollTo(0, 0);
        // 或者使用：document.documentElement.scrollTop = 0;
    };
  </script>
</body>
</html>

上述示例代码中，我们在页面底部添加了一个“回到顶部”按钮，并使用了JavaScript来实现以下两个功能：

当滚动条滚动至高度达到500px时，显示“回到顶部”按钮。
当点击“回到顶部”按钮时，将滚动条回到最顶部。

结束语

以上是关于如何让JavaScript滚动条回到顶部的完整攻略。希望对您有所帮助！

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：js滚动条回到顶部的代码 - Python技术站

js滚动条回到顶部的代码

1. 使用window.scrollTo()方法

2. 使用document.documentElement.scrollTop属性

示例

结束语

相关文章