スクロールさせる方法 [JavaScript]

window.scrollTo

ウィンドウ内の指定した座標の位置まで、ウィンドウをスクロールさせる。

window.scrollTo(x, y);
Code language: JavaScript (javascript)

見出しの位置までスクロールする。

const header = document.querySelector("#header");
window.scrollTo(0, header.getBoundingClientRect().y + window.scrollY);
Code language: JavaScript (javascript)

参考：

window.scrollTo | MDN

window.scrollBy

ウィンドウを指定した距離だけスクロールさせる。

window.scrollBy(0, 100);
Code language: JavaScript (javascript)

参考：

ウィンドウ名.scrollBy() | HTML クイックリファレンス

Window.scrollBy() | MDN

window.pageXOffset / window.pageYOffset

参考：

Window.pageXOffset | MDN

Window.pageYOffset | MDN

window.scrollX / window.scrollY

参考：

window.scrollX | MDN

window.scrollY | MDN

scrollTop

参考：

Element.scrollTop | MDN

ページ上端へ戻るボタンを実装する

参考：

How to Create a Scroll Back to Top Button | W3Schools

要素の位置を取得する

ウィンドウ内での要素の位置を取得する。

function getOffset(elem) {
    const rect = elem.getBoundingClientRect();
    return {
        left: rect.left + window.scrollX,
        top: rect.top + window.scrollY
    };
}
Code language: JavaScript (javascript)

参考：

スクロール位置取得方法をいい加減忘れないようにメモ – Qiita

要素の位置を取得する | まくまく JavaScript ノート

Element.getBoundingClientRect() | MDN

Retrieve the position (X, Y) of an HTML element – Stack Overflow

テキストエリア

参考：

テキストエリアのキャレット位置を JavaScript で指定した時にスクロールバーを追従させる – Qiita

Tips

参考：

Scroll to the Future | Evil Martians’ Team Blog