scrollintoview用法
时间: 2023-07-27 07:06:22 浏览: 88
`scrollIntoView()` 方法可以让元素滚动到可见区域。
这个方法用于将当前元素滚动到浏览器窗口的可视区域内,如果该元素已经在可视区域内,则不会发生滚动。
`scrollIntoView()` 方法不接受任何参数。如果当前元素已经在可视区域内,它将不会滚动;否则,它将尽可能地滚动到可视区域内。如果元素被部分遮挡,则它将滚动到能够完全显示它的位置。
这个方法可以在任何具有滚动条的元素上使用, 例如 `window`, `div`, `textarea` 等。
示例:
```html
<!DOCTYPE html>
<html>
<body>
<div style="height: 2000px">
<h1 id="heading">This is a heading</h1>
<button onclick="scrollToHeading()">Scroll to heading</button>
</div>
<script>
function scrollToHeading() {
const heading = document.getElementById("heading");
heading.scrollIntoView();
}
</script>
</body>
</html>
```
在上面的示例中,当用户点击“Scroll to heading”按钮时,页面将滚动到id为“heading”的h1元素所在的位置,使其在浏览器窗口的可视区域内可见。
阅读全文