JavaScript 页面滚动 API scrollTo 与 scrollIntoView

window.scroll()/window.scrollTo/

滚动窗口至文档中的特定位置。

window.scroll({
  top: 100,
  left: 100,
  behavior: 'smooth',
});

window.scrollBy(options)

在窗口中按指定的偏移量滚动文档。

window.scrollBy({
  top: 100,
  left: 100,
  behavior: 'smooth',
});

参数

top：等同于 y-coord
left：等同于 x-coord
behavior：表示滚动行为，支持参数：smooth (平滑滚动)，instant (瞬间滚动)，默认值 auto，效果等同于 instant

element.scrollIntoView()

滚动元素的父容器，使被调用 scrollIntoView() 的元素对用户可见。

参数

Boolean 型参数

element.scrollIntoView(alignToTop);Object 型参数
element.scrollIntoView(scrollIntoViewOptions);
alignToTop
- 如果为 true，元素的顶端将和其所在滚动区的可视区域的顶端对齐。相应的 scrollIntoViewOptions: {block: "start", inline: "nearest"}。这是这个参数的默认值。
- 如果为 false，元素的底端将和其所在滚动区的可视区域的底端对齐。相应的 scrollIntoViewOptions: {block: "end", inline: "nearest"}。
scrollIntoViewOptions
- behavior 可选定义动画过渡效果， auto 或 smooth 之一。默认为 auto。
- block 可选定义垂直方向的对齐， start, center, end, 或 nearest之一。默认为start`。
- inline 可选定义水平方向的对齐， start, center, end, 或 nearest之一。默认为start`。

::: demo [vanilla]

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
  </head>
  <body>
    <button onClick="window.scroll({ top: 0, left: 100, behavior: 'smooth'});">
      滚动至 top: 10 left: 100 像素
    </button>
    <button
      onClick="window.scrollBy({ top: 10, left: 100, behavior: 'smooth'});"
    >
      向右滚动 10 像素 向下滚动 100 像素
    </button>
    <button onClick="testScrollIntoView1()">test1 将会滚动到最上面</button>
    <button onClick="testScrollIntoView2()">test1 将会滚动到最下面</button>
    <button onClick="testScrollIntoView3()">test1 将会滚动到最中间</button>
    <button onClick="testScrollIntoView4()">test1 将会滚动到nearest</button>
    <div id="test"></div>
    <div id="test1" style="white-space: nowrap"></div>
    <div id="test2"></div>

    <script>
      const test = document.getElementById('test');
      const test1 = document.getElementById('test1');
      const test2 = document.getElementById('test2');
      for (let i = 0; i < 50; i++) {
        test.innerHTML += `<div>${i}</div>`;
        test2.innerHTML += `<div>${i}</div>`;
      }
      test1.innerHTML =
        '点击以向下滚动 100 像素点击以向下滚动 100 像素点击以向下滚动 100 像素点击以向下滚动 100 像素点击以向下滚动 100 像素点击以向下滚动 100 像素点击以向下滚动 100 像素点击以向下滚动 100 像素点击以向下滚动 100 像素';

      function testScrollIntoView1() {
        test1.scrollIntoView({
          block: 'start',
          inline: 'nearest',
          behavior: 'smooth',
        });
      }

      function testScrollIntoView2() {
        test1.scrollIntoView({
          block: 'end',
          inline: 'nearest',
          behavior: 'smooth',
        });
      }

      function testScrollIntoView3() {
        test1.scrollIntoView({
          block: 'center',
          inline: 'nearest',
          behavior: 'smooth',
        });
      }

      function testScrollIntoView4() {
        test1.scrollIntoView({
          block: 'nearest',
          inline: 'nearest',
          behavior: 'smooth',
        });
      }
    </script>
  </body>
</html>

{
  "show": true
}

:::