kdcsライブラリー

ページトップへのスクロールをスムーズに移動させるためにjQuery＋smoothscroll.jsを使用していたが、以下のようにjavascriptだけで動作するようにした。

common.js

const topButton = document.querySelector('#page-top-js');

topButton.addEventListener('click', () => {
  window.scrollTo({
    top: 0,
    behavior: 'smooth'
  });
});

これでは古いiosのsafariでは「behavior: ‘smooth’」がサポートされていないので、「smoothscroll.polyfill」を使う。

footer.php
※common.js内の記述より先に読み込む必要があるのでfooter.phpに記述する。

<script src="https://unpkg.com/smoothscroll-polyfill/dist/smoothscroll.min.js"></script>
<script>
  // ポリフィルを初期化
  smoothscroll.polyfill();
</script>

但し、2022年4月時点で最新のSafari15.4にて、scroll-behaviorが使用できるようになっているので最近のブラウザだけに対応すればよければ以下のcssでOK。

html {
  scroll-behavior: smooth;
}