| 「这是我参与11月更文挑战的第23天，活动详情查看：2021最后一次更文挑战」 |
|---|
css
/* 凡是需要滚动的地方都加一句scroll-behavior:smooth就好了！ */
html,
body {
scroll-behavior: smooth;
}
js
Element.scrollIntoView()
而 Element.scrollIntoViewIfNeeded()方法也是用来将不在浏览器窗口的可见区域内的元素滚动到浏览器窗口的可见区域。但如果该元素已经在浏览器窗口的可见区域内，则不会发生滚动。此方法是标准的 Element.scrollIntoView()方法的专有变体。
因而再有什么回到顶部、去到置顶位置和键盘弹出挡住输入框之类的需求，都可以简单解决了。
scrollIntoView 只接受一个参数，但接受两种类型的参数，分别是 Boolean 型参数和 Object 型参数。
-
如果为
true，元素的顶端将和其所在滚动区的可视区域的顶端对齐。若为 false，元素的底端将和其所在滚动区的可视区域的底端对齐。 -
之后是
Object 型参数，这个对象有两个选项，也就是对象里面的 key。block 与之前的 Boolean 型参数一致，不过值不再是 true 和 false，是更语义化的 start 和 end。 -
另一个选项是 behavior,MDN 上给出三个可取的值，分别是 auto、instant 与 smooth。这个选项决定页面是如何滚动的，实测 auto 与 instant 都是瞬间跳到相应的位置，而 smooth 就是有动画的过程。
scrollIntoViewIfNeeded是比较懒散的，如果元素在可视区域，那么调用它的时候，页面是不会发生滚动的。其次是 scrollIntoViewIfNeeded 只有 Boolean 型参数，也就是说，都是瞬间滚动，没有动画的可能了
当红色的 div 完全在可视区域的情况下，调用 scrollIntoView()是会发生滚动，而调用 scrollIntoViewIfNeeded()则不会。而我实践后发现了一些文档没有的细节。当元素处于可视区域，但不是全部可见的情况下，调用 scrollIntoViewIfNeeded()时，无论参数是 true 还是 false，都会发生滚动，而且效果是滚动到元素与可视区域顶部或底部对齐，视乎元素离哪端更近。这个大家需要注意一下~
<body>
<div class="chunk"></div>
<div class="btn-top">up</div>
<div class="btn-bottom">down</div>
<div class="scrollIntoViewIfNeeded-top">scrollIntoViewIfNeeded top</div>
<div class="scrollIntoViewIfNeeded-bottom">scrollIntoViewIfNeeded botom</div>
<script>
const up = document.querySelector('.btn-top');
const down = document.querySelector('.btn-bottom');
const scrollIntoViewIfNeededTop = document.querySelector('.scrollIntoViewIfNeeded-top');
const scrollIntoViewIfNeededBottom = document.querySelector('.scrollIntoViewIfNeeded-bottom');
const test = document.querySelector('.chunk');
up.addEventListener('click', function() {
test.scrollIntoView(true);
// test.scrollIntoView({
// block: 'start',
// behavior: 'smooth',
// })
});
down.addEventListener('click', function() {
test.scrollIntoView(false);
// test.scrollIntoView({
// block: 'end',
// behavior: 'smooth',
// })
});
scrollIntoViewIfNeededTop.addEventListener('click', function() {
test.scrollIntoViewIfNeeded(true);
});
scrollIntoViewIfNeededBottom.addEventListener('click', function() {
test.scrollIntoViewIfNeeded(false);
});
</script>
</body>
