scrollIntoViewとは
scrollIntoViewはDOM要素のメソッドで、要素がスクロール領域内に収まるようにスクロールします。
便利なメソッドですが、正しい使い方でスクロールされていないことがあります。
MdNのドキュメントにはscrollIntoViewのサンプルのコードが書かれていますが、不要なscroll-margin-topが指定されているなど、使い方が間違っています。
Element: scrollIntoView() メソッド
scrollIntoViewの使い方
まずはスクロールのサンプルの作成のため、必要なHTMLとCSSを以下のように記載します。
HTML
<header class="navbar">navbar</header>
<main class="content">
<button id="go-to-bottom">下端へ移動</button>
<button id="go-to-top">上端へ移動</button>
</main>CSS
.navbar {
display: flex;
justify-content: center;
align-items: center;
position: sticky;
top: 0;
height: 50px;
border-bottom: 2px solid #333;
}
.content {
position: relative;
height: 2000px;
padding-top: 50px;
}
#go-to-bottom {
position: absolute;
top: 10px;
}
#go-to-top {
position: absolute;
bottom: 10px;
}MdNのサンプルではscroll-margin-topが使用されていましたが、scrollIntoViewを使うのであれば通常は不要です。
次にボタンをクリックしたときのscrollIntoViewのコードを以下のように書きます。
#go-to-bottomをクリックしたときに#go-to-topのblock: 'start'の位置までスクロールさせ、逆に#go-to-topをクリックしたときは#go-to-bottomのblock: 'end'の位置までスクロールされます。
blockの位置を指定しなかったり、アンカーリンクにして「上端へ移動」をクリックすると、「下端へ移動」のボタン位置が適切な位置に表示されないことが確認できます。
JavaScript
const goToTop = document.getElementById('go-to-top')
const goToBottom = document.getElementById('go-to-bottom')
goToBottom.addEventListener('click', () => {
goToTop.scrollIntoView({ block: 'start', behavior: 'smooth' })
})
goToTop.addEventListener('click', () => {
goToBottom.scrollIntoView({ block: 'end', behavior: 'smooth' })
})
