ページ内リンクのスクロールを簡単に実装できるscrollIntoView

同じページ内を移動するリンクスクロールは、今や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
scrollIntoViewで指定できるオプション

初期値は、

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 });
  },{});
};

Author

ミフネWEBのロゴ

ネットショップ専門のWEBサイト制作事務所です(個人事務所)。

部分的なテンプレートカスタマイズから、高速化や機能追加、新規ショップ制作などECに関するいろいろを承ります。(軽微なカスタムなら5,500円〜)

ご依頼・ご相談は「お問い合わせ・ご相談」より随時承ります。