
同じページ内を移動するリンクスクロールは、今やcssのscroll-behaviorプロパティだけでも実装できますが、どうしてもJava Scriptを使いたい場合もあると思います。
かつてはターゲット要素の位置を取得して〜とかごちゃごちゃ書いていたのですが、それをシンプルなコードで書けるようになったのがscrollIntoViewメソッドです。
ちなみに現時点でIEは未対応です。safari、iOS safariはoption指定ができません(スムーススクロールができない)。
scrollIntoViewの使い方
scrollIntoView は、対象となる要素(リンクターゲット)が見える位置までページをスクロールします。オプションで、要素のどこに、どのように移動するかを指定します。
target.scrollIntoView(option); //optionは省略可
option | 内容 : 設定できる値 |
---|---|
behavior | 動き方:auto , smooth |
block | 垂直方向の停止位置:start , center, end, nearest |
inline | 水平方向の停止位置:start , center, end, nearest |
初期値は、
target.scrollIntoView({
behavior: "auto" ,
block: "start" ,
inline: "nearest"
});
となります。
ページ内リンクをまとめて扱うのなら、大体下のような感じのコードでしょうか。
const linkList = document.querySelectorAll( 'a[href^="#"]');
for( const link of linkList){
link.addEventListener("click", (e)=> {
e.preventDefault();
const target = document.querySelector(link.hash);
target.scrollIntoView({ OPTION });
},{});
};