scrollIntoView(alignWithTop)
时间: 2023-11-21 13:56:53 浏览: 46
scrollView
scrollIntoView(alignWithTop)是一个HTML5的新特性,它可以滚动浏览器窗口或容器元素,以便在当前视窗的可见范围看见当前元素。其中,alignWithTop是一个可选参数,如果它为true或者省略,窗口会尽可能滚动到自身顶部与元素顶部平齐。如果它为false,窗口会尽可能滚动到自身底部与元素底部平齐。下面是一个使用scrollIntoView(alignWithTop)的例子:
```html
<!DOCTYPE html>
<html>
<head>
<title>scrollIntoView</title>
</head>
<body>
<div style="height: 1000px;"></div>
<button onclick="scrollToTop()">Scroll to top</button>
<button onclick="scrollToBottom()">Scroll to bottom</button>
<div id="myDiv" style="height: 500px; background-color: yellow;">This is my div</div>
<button onclick="scrollToMyDiv()">Scroll to my div</button>
<script>
function scrollToTop() {
window.scrollTo({top: 0, behavior: 'smooth'});
}
function scrollToBottom() {
window.scrollTo({top: document.body.scrollHeight, behavior: 'smooth'});
}
function scrollToMyDiv() {
var myDiv = document.getElementById('myDiv');
myDiv.scrollIntoView({behavior: 'smooth', block: 'start', inline: 'nearest', alignWithTop: true});
}
</script>
</body>
</html>
```
上面的例子中,我们定义了三个按钮和一个div元素。第一个按钮用于滚动到页面顶部,第二个按钮用于滚动到页面底部,第三个按钮用于滚动到我们定义的div元素。当我们点击第三个按钮时,页面会滚动到div元素的位置,并且div元素的顶部会与窗口的顶部平齐。如果我们将alignWithTop设置为false,div元素的底部会与窗口的底部平齐。
阅读全文