aタグを使ってHTMLでページ内リンクをスムーズスクロールさせる

はじめに

タイトルについて記事にしました。
この記事で得る内容は以下の通りです。

・ HTML及び、JavaScriptの知識が増える
・ a要素を使ってHTMLでページ内リンクをスムーズスクロールさせる方法

例

下記の様に、ヘッダーに各コンテンツのリンク先を掲載する場合です。

haml

リンク先にidを割り振ります。

index.haml

.container-top#HOME
.container-profile#ABOUT
.container-skill#SKILLS
.container-works#WORKS
.container-contact#CONTACT

ヘッダーのa要素に、href属性で先ほど割り振った各リンク先のidを書きます。

index.haml

.header
  %a(href="#HOME") HOME
  %a(href="#ABOUT") ABOUT
  %a(href="#TEXT") TEXT
  %a(href="#WORKS") WORKS
  %a(href="#CONTACT") CONTACT

これでaタグをクリックすると、割り当てたリンク先にスクロールしますが
瞬時にスクロールしてしまい、あまり面白みがない様に感じます。

スムーズスクロールさせるには、CSSを使うか、JavaScriptを使う2種類の方法があります。

html要素にscroll-behavior: smooth;を適用する

導入がとても簡単ですが、ページ内リンクが全てスムーズスクロールになってしまい、スクロール速度の微調整ができません。

index.scss

html {
  scroll-behavior: smooth;
}

JavaScriptでスムーズスクロールさせる

先程のhamlのa要素にクラスsmoothScrollを付与します。

index.haml

.header
  %a.smoothScroll(href="#HOME") HOME
  %a.smoothScroll(href="#ABOUT") ABOUT
  %a.smoothScroll(href="#TEXT") TEXT
  %a.smoothScroll(href="#WORKS") WORKS
  %a.smoothScroll(href="#CONTACT") CONTACT

クラスsmoothScrollがあるか判定し、ない場合は処理を中断します。

scrpit.js

document.addEventListener("click", (e) => {
  const target = e.target;
  if (!target.classList.contains("smoothScroll")) return;
  e.preventDefault();
  const targetId = target.hash;
  document.querySelector(targetId).scrollIntoView({
    behavior: "smooth",
    block: "start",
  });
});

参考：どちらの方法も対応ブラウザがchromeとFirefoxにほぼ限られてしまう点には注意とのことです。