JavaScriptでスムーススクロールを実装する

こんなやつ

動作デモ → https://jsfiddle.net/zr36gcpb/

コード

HTML

<div class="scroll">
  <a class="scroll__button" href=".contents__1">Scroll</a>
  <a class="scroll__button" href=".contents__2">Scroll</a>
  <a class="scroll__button" href=".contents__3">Scroll</a>
  <a class="scroll__button" href=".contents__4">Scroll</a>
</div>

<div class="contents">
  <div class="contents__1">Contents1</div>
  <div class="contents__2">Contents2</div>
  <div class="contents__3">Contents3</div>
  <div class="contents__4">Contents4</div>
</div>

JavaScript

const smoothScroll = e => {
  const target = document.querySelector(e.target.getAttribute('href'));
  const position = target.getBoundingClientRect().top + window.scrollY;

  e.preventDefault();

  window.scrollTo({
    top: position,
    behavior: 'smooth'
  });
  //window.scrollToの引数のtopは「ドキュメントの左上を基準にした目標の要素のY座標のピクセル値」で、
  //behaviorにはsmoothを指定する事で挙動がスムーススクロールになります。
}

const buttons = document.querySelectorAll('.scroll__button');

buttons.forEach(button => {
  button.addEventListener('click', smoothScroll);
})

上記の関数smoothScrollを任意のaタグに走らせることで、擬似的にhrefで指定した要素にスムーススクロールするボタンになります。

やっている事は単純で、aタグに指定されているhrefの値を取得して、変数positionにその指定された要素の「ビューポートの左上からのY座標のピクセル数」と「現在スクロールしているY座標のピクセル数」を足したもの（=対象の要素の絶対位置）を格納しています。
そのpositionの値を使用して、window.scrollToで目標の位置までスクロールしています。
そして、もちろんaタグのデフォルトの動作をキャンセルするpreventDefaultも指定します。

もしaタグ以外で使用したい場合は、hrefの代わりにdata属性を指定してそれをgetAttributeすれば良いと思います。


出来ました。(*ﾟ▽ﾟﾉﾉﾞ☆ﾊﾟﾁﾊﾟﾁﾊﾟﾁ

※注意点
一部のブラウザでパラメーター部分が非対応なため、普通のスクロールになってしまう事がある。
ブラウザの実装状況（MDN）