元素：scrollIntoView() 方法

基线广泛可用

此功能已得到充分确立，并且可在许多设备和浏览器版本上运行。它自以下时间起在浏览器中可用： 2020 年 9 月.

Element 接口的 scrollIntoView() 方法滚动元素的祖先容器，以便用户可以看到调用 scrollIntoView() 的元素。

语法

scrollIntoView()
scrollIntoView(alignToTop)
scrollIntoView(scrollIntoViewOptions)

参数

alignToTop 可选

布尔值

如果为true，则元素的顶部将与可滚动祖先的可视区域的顶部对齐。对应于scrollIntoViewOptions: {block: "start", inline: "nearest"}。这是默认值。
如果为false，则元素的底部将与可滚动祖先的可视区域的底部对齐。对应于scrollIntoViewOptions: {block: "end", inline: "nearest"}。

scrollIntoViewOptions 可选实验性

一个包含以下属性的对象

behavior 可选

确定滚动是立即发生还是平滑动画。此选项是一个字符串，必须采用以下值之一

smooth：滚动应平滑动画
instant：滚动应立即以一次跳转发生
auto：滚动行为由scroll-behavior的计算值确定

block 可选

定义垂直对齐方式。start、center、end或nearest之一。默认为start。

inline 可选

定义水平对齐方式。start、center、end或nearest之一。默认为nearest。

返回值

无（undefined）。

示例

使用scrollIntoView()

const element = document.getElementById("box");

element.scrollIntoView();
element.scrollIntoView(false);
element.scrollIntoView({ block: "end" });
element.scrollIntoView({ behavior: "smooth", block: "end", inline: "nearest" });

控制顶部/底部对齐

默认情况下，元素与可滚动祖先的顶部（或底部）边缘对齐。要定义自定义间距，请使用scroll-margin-top或scroll-margin-bottom。当页面上存在固定标题时，这通常很有用。

HTML

html

<body>
  <header class="navbar">Navbar</header>
  <main class="content">
    <button id="go-to-bottom">Go to bottom</button>
    <button id="go-to-top">Go to top</button>
  </main>
</body>

CSS

css

.navbar {
  height: 50px;
  position: sticky;
  top: 0;
  border-bottom: 1.5px solid black;
  display: flex;
  justify-content: center;
  align-items: center;
}
.content {
  height: 2000px;
  position: relative;
}
#go-to-bottom {
  position: absolute;
  top: 10px;
  /* Without this, the button will be aligned to the top of the page
  instead of bottom of navbar when scrolled */
  scroll-margin-top: 60px;
}
#go-to-top {
  position: absolute;
  bottom: 10px;
  scroll-margin-bottom: 0;
}

JavaScript

const goToTop = document.getElementById("go-to-top");
const goToBottom = document.getElementById("go-to-bottom");
goToBottom.addEventListener("click", () => {
  goToTop.scrollIntoView({ behavior: "instant", block: "end" });
});
goToTop.addEventListener("click", () => {
  goToBottom.scrollIntoView({ behavior: "instant", block: "start" });
});

结果

规范

规范
CSSOM 视图模块 # dom-element-scrollintoview

浏览器兼容性

BCD 表格仅在浏览器中加载

另请参阅

Element.scrollIntoViewIfNeeded() 非标准