グループ会社出納業務の証票処理を70％自動化。日立のAI-OCR技術とは？詳しくはこちら
@iiishokoiii

ページ内リンクに smooth scroll を実装する

JavaScriptjQuery

概要

ページ内リンクに smooth scroll を実装する際の覚え書き。
jQUeryを使用する場合と、JavasScriptのみで実装する場合をそれぞれまとめています。

jQueryで実装

サンプル

index.html
<p><a href="#hoge">ページ内リンク</a></p>
index.js
$(function() {
  let elms = document.querySelectorAll('.js-scroll');
  elms.on('click',(e) => {
    e.preventDefault();
    let $target = $($(this).attr('href'));  //ターゲットの要素取得
    if ($target.length > 0) {
      $('html, body').animate({
        scrollTop: $target.offset().top
      }, 500, 'swing');
    }
  })
})

JavaScriptのみで実装

サンプル

index.js
document.addEventListener('DOMContentLoaded', () => {
  let elms = document.querySelectorAll('.js-scroll');
  if (elms) {
    elms.forEach((elm) => { 
      elm.addEventListener('click', (e) => {
        e.preventDefault();
        const target = document.querySelector(elm.getAttribute('href'));  //ターゲットの要素取得
        if (target) {
          target.scrollIntoView({
            behavior: "smooth",
          });
        }
      })
    })
  }
})

scrollIntoView()は、ターゲットとなる要素が見えるまで、親要素をスクロールさせるメソッドです。（オプション設定のsmoothはIE非対応）

scrollIntoView: https://developer.mozilla.org/ja/docs/Web/API/Element/scrollIntoView

ユーザー登録して、Qiitaをもっと便利に使ってみませんか。
    iiishokoiii

    コメント

    6337cj@6337cj
    <p><a href="#hoge">ページ内リンク</a></p>

    上記aタグ、class='js-scroll'の指定が抜けていませんか？

    また、class='js-scroll'が指定されている要素全てに対してループを回してclickイベントリスナを設定するより、windowにclickイベントリスナを設定してそこでクリックされたものがclass='js-scroll'が指定された要素だったら以降の処理を行う、という処理にすればループする必要もなく記述が簡単になるかと思います。

    window.addEventListener('DOMContentLoaded', () => {
  window.addEventListener('click', e => {
    const elm = e.target;
    if(!elm.classList.contains('js-scroll')) return;
    const target = document.querySelector(elm.getAttribute('href'));
    if(!target) return;
    e.preventDefault();
    target.scrollIntoView({behavior: 'smooth'});
  });
});
    0
    あなたもコメントしてみませんか :)
    ユーザー登録
    すでにアカウントを持っている方はログイン
    0
    0