Javascript：1行挿入でスムーススクロール imzSmoothScroll

「CSS：scroll-behavior:smooth を使わないわけ」で紹介した自作のスムーススクロールを公開します。

• 特徴
• Javascript
• imzSmoothcroll の使い方
  • 個別にスムーススクロールを呼び出す場合
• ライセンス等

特徴

• jQuery などのライブラリーを必要としない素の Javascript
• 1行挿入でページ内リンクを自動的にスムーススクロール化
• ページ内リンクでもスムーススクロール除外可能
• addEventListener により個別に呼び出し可能
• イージングは easeOutQuint に近い 1イージング固定
  デモサイト

Javascript

window.addEventListener('DOMContentLoaded', () => {
  const smoothscroll = (target) => {
    const scrollHeight = document.documentElement.scrollHeight;
    const viewportHeight = document.documentElement.clientHeight;
    const bottomScrollTop = scrollHeight - viewportHeight;
    const startY = window.pageYOffset;


    const scrollDown = () =>{
      const startY = window.pageYOffset;
      let y = startY + (targetY - startY) / 20 + 1;
      window.scroll(0, y);
      if (y > targetY || y > bottomScrollTop) return;
      requestAnimationFrame(scrollDown);
    };


    const scrollUp = () =>{
      const startY = window.pageYOffset;
      let y = startY - (startY - targetY) / 20 - 1;
      window.scrollTo(0, y);
      if (y < targetY) return;
      requestAnimationFrame(scrollUp);
    };


    let targetY;
    if(Number.isInteger(target)){
      if(target >= 0 && target <= bottomScrollTop){
        targetY = target;
      }else{
        return;
      }
    }else{
      const targetElem = document.getElementById(target.replace(/^#/, ''));
      if (targetElem !== null){
        targetY = targetElem.getBoundingClientRect().top + startY;
      }else{
        return;
      }
    }


    (targetY > startY) ? requestAnimationFrame(scrollDown) : requestAnimationFrame(scrollUp);
  };
  
  window.imz = window.imz || {};
  window.imz.smoothscroll = smoothscroll;


  const anchors = document.getElementsByTagName('a');
  [].slice.call(anchors).forEach(anchor => {
    const href = anchor.getAttribute('href');
    if(/^#.*/.test(href) && anchor.dataset.ignore === undefined){
      anchor.addEventListener('click', (e) => {
        e.preventDefault();
        imz.smoothscroll(href);
      })
    }    
  });
});

imzSmoothcroll の使い方

script タグで imzSmoothScroll.min.js を読み込むだけでページ内リンクがスムーススクロールになります。

<script src="https://imuzacom.github.io/js/imzSmoothSctoll.min.js"></script>

除外する場合は、アンカー要素に data-ignore のカスタムデータ属性を追加します。

例：<a href="#hogehoge" data-ignore></a>

DOMContentLoaded イベント読み込みますので script はどこに置いても構いません。

個別にスムーススクロールを呼び出す場合

addEventListener を使い、imz.smoothscroll 関数を呼び出してください。引数はピクセル数値、または移動先 id です。

たとえば、

<div id="toTop">トップへ</div>


<script>
document.getElementById('toTop').addEventListener('click', () => {imz.smoothscroll(0)});
</script>

ライセンス等

ご使用の場合は以下の注意事項をお守りください。

• ライセンスは IMUZA.com にあります。
• 当記事の Javascript を使用してのはてなブログ用テーマの制作、公開は商用以外は自由です。ただし、記事内、あるいは紹介サイト内に IMUZA.com へのリンクを挿入してください。
• 当記事の CSS への改変、公開は自由です。
• 特別問題が発生することはありませんが自己責任でお使いください。
  問題が発生した場合は削除すればもとに戻ります。
• お問い合わせ、バグの報告、仕様変更のご要望等は Contact Us までお願いします。