如何使用 JavaScript 滚动到页面顶部

让页面立即跳转到顶部可以通过原生 JavaScript 方法完成,即 --window.scrollTo(x-coord, y-coord)。

窗口界面的这个属性滚动到文档中的一组特定坐标。
它有两个参数:x 和 y。

  • x-coord - 沿水平轴的像素。
  • y-coord - 沿垂直轴的像素。
window.scrollTo(x-coordinate, y-coordinate)

将这两个参数都设置为 0 会将页面滚动到最顶部和最左侧的点。

function scrollToTop() {
  window.scrollTo(0, 0);
}

例子:

<!DOCTYPE html>
<html>
  <head>
    <title>文档的标题</title>
    <style>
      .scroll {
        height: 1200px;
        background-color: yellow;
      }
    </style>
  </head>
  <body>
    <h1>  Scroll </h1>
    <p class="scroll">假设这里是很高的段落,</p>
    <button onclick="scrollToTop()">
      Click to scroll to top
    </button>
    <script>
      function scrollToTop() {
        window.scrollTo(0, 0);
      }
    </script>
  </body>
</html>

窗口界面

Window Interface表示一个包含 DOM 文档的窗口。

它是与用户界面窗口无关的各种函数、对象、命名空间和构造函数的宿主。

Window Interface 是一个包含这些需要全局可用的项目的地方。

代表运行脚本的窗口的 window 全局变量暴露给 JavaScript 代码。

日期:2020-06-02 22:16:25 来源:oir作者:oir