jQueryを使ってページ内リンクのスクロールを実装する 🖱

最近めっきり使うことの少なった jQuery 。
しかし、稀にjQuery導入済みのサイトの改修を依頼されることもあるので、使う機会がゼロになったわけではありません。
久しぶりに使うと、animateがすごく便利で、ついつい多用したくなります。

animateを使えばページ内リンクをスクロールで移動する実装も楽々。

const duration = 800;
const $base = $('html, body');

$('a[href^="#"]').on('click', (evt) => {
  evt.preventDefault();

  setTimeout(() => {
    const href = evt.target.getAttribute('href');
    const $target = $(href);

    if (!$target.length) {
      return;
    }

    $base.stop().animate({
      scrollTop: $target.offset().top
    }, duration);
  }, 0);
});