Zenn
🔖

JavaScriptで指定した要素の位置までスクロールするには2022年現在なら scrollIntoView() が便利

2022/10/20に公開
JavaScript
JavaScript
DOM
tech

TL;DR

JavaScriptで指定した要素の位置までスクロールする方法色々

Element.scrollIntoView()

わりと新しい方法みたい。
スムーススクロール（マウスホイールでのスクロールするのと同じようにスクロール）するのも簡単。

const element = document.getElementById('hoge');
element.scrollIntoView({  
  behavior: 'smooth'  
});

要素の位置を取得後、ページをスクロールさせる

要素の位置を取得

Element.getBoundingClientRect().top で指定の要素のY位置を取得できるのでこれを使う。

document.documentElement.scrollTop に値をセット

スムーススクロールはできない。

const element = document.getElementById('hoge');
const targetDOMRect = element.getBoundingClientRect();
const targetTop = targetDOMRect.top + window.pageYOffset;
document.documentElement.scrollTop = targetTop;

window.scrollTo() を使う

スムーススクロールもできる。

const element = document.getElementById('hoge');
const targetDOMRect = element.getBoundingClientRect();
const targetTop = targetDOMRect.top + window.pageYOffset;
window.scrollTo({
  top: targetTop,
  behavior: 'smooth'
});

全ての方法に共通する注意

画面に表示してない要素（hiddenタグなど）は
Element.scrollIntoView() しても動かないし
Element.getBoundingClientRect() しても top はゼロだし
でハマったりするので注意

参考リンク

Discussion