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

記事をシェアする:
タグ:

コメントを残す

メールアドレスが公開されることはありません。

Protected by reCAPTCHA