対象要素までヌルッと自動スクロールするメソッドの書き方！

まえがき

無限番煎じですが、調べるのに地味に時間がかかったので、自分用を兼ねて残しておきます。

コード

scrollToTarget() {
    const element = document.getElementById("target-id")
    const rect = element.getBoundingClientRect()
    const currentScrolledHeight = window.pageYOffset || document.documentElement.scrollTop
    const position = window.innerHeight * 0.9
    window.scrollTo({top: rect.bottom + currentScrolledHeight - position, behavior: "smooth"})
}

このメソッドが実行された際の動きとしては
idがtarget-idである要素の下部が、ウインドウの上から90%のところに来るようにヌルッとスクロールします。

理屈

• idがtarget-idである要素の相対座標とサイズを取得する(rect)
• すでにスクロールされている高さを取得(currentScrolledHeight)
• ウインドウサイズの上から90%の位置取得(position)
• target-idである要素の下部の相対座標 + すでにスクロールされている高さ = target-idである要素の下部の絶対座標
• window.scrollToは、指定座標がウインドウの一番上にくるようにスクロールするため、positionを引いて位置調整する
• デフォルトだと、一瞬でスクロールするせいで画面がどの位置なのか混乱を招くので、behavior: "smooth"を指定することでスクロールアニメーションでヌルッとさせる

あとがき

scrollToの引数のtopの部分をleftにしたら横スクロールになったり、rect.bottomをrect.topにすることでターゲットの上部座標を基準にできたりしますので、都度改造して使ってください！