例えば、目次と５つの項目に対する本文があるとする

ＨＴＭＬの画面
<!-- 目次 -->
<ul>
  <li><a href="#menu1">Ａ</a></li>
  <li><a href="#menu2">Ｂ</a></li>
  <li><a href="#menu3">Ｃ</a></li>
  <li><a href="#menu4">Ｄ</a></li>
  <li><a href="#menu5">Ｅ</a></li>
</ul>
<!-- 各項目 -->
<div id="menu1">Ａについて</div>
<div id="menu2">Ｂについて</div>
<div id="menu3">Ｃについて</div>
<div id="menu4">Ｄについて</div>
<div id="menu5">Ｅについて</div>

これでページ内リンクを作成できた。ただこのままでは、目次をクリックした瞬間、各項目に瞬間的に移動してしまい、ページ内の項目間をどれくらい移動したのか分からなくなる恐れがある。

そこでページ内をスクロールしているように見せるため、ＨＴＭＬ全体にスムーズスクロールを適用する

ＣＳＳの画面
html{
scroll-behavior: smooth;
}

これでページ内リンクを滑らかなスクロールをしながら移動できるようになる。

※html以外のタグ、divやclassをcssでscroll-behavior: smooth;を指定してみたが、瞬間的に移動した。

ページ内リンクを滑らかなスクロールさせたい際はhtmlタグが良さそうだ。

※筆者は、PCで検証してこの記事を投稿。しかしスマホで検証を行ったところ、なぜか瞬間的移動になってしまいました。スマホでもCSSのみで滑らかなスクロールができる方法を再仮定して実験中。