IMUZA.com

Xserver<<WordPress(ConoHa)<<はてなブログ

ホーム / javascript / Javascript:1行挿入でスムーススクロール imzSmoothScroll

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

2021/07/25 javascript

「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 までお願いします。

ファイナルファンタジーXIV コンプリートパック【新生エオルゼア~漆黒のヴィランズ】【Amazon.co.jp限定】オリジナルPC壁紙 配信 |Win対応|ダウンロード版

ファイナルファンタジーXIV コンプリートパック【新生エオルゼア~漆黒のヴィランズ】【Amazon.co.jp限定】オリジナルPC壁紙 配信 |Win対応|ダウンロード版

  • スクウェア・エニックス

Amazon

Javascript:ページ最下部までスクロールするための最上部は?
Windows10 に Linux 環境(wsl2)
Twitter
Facebook
ブックマーク
LINEで送る

最初のサイドバー

最新記事

2023/05/25

WordPress:リビジョン削除、回数制限

2023/05/10

WordPress:裏技的サイトリニューアル

2023/04/28

XserverへのSSH接続がエラーになってしまった

2023/04/16

正規表現の最短一致でミスる

2023/04/4

WordPress:公開中サイトをサブディレクトリでリニューアルし公開する

最新記事を一覧で見る

よく読まれている記事

よく読まれている記事を一覧で見る

カテゴリー

  • はてなブログ215
  • WebTips109
  • javascript98
  • Joomla!88
  • Wordpress70
  • Windows68
  • CSS63
  • Joomla!更新53
  • Linux49
  • はてなテーマ45
  • Google34
  • Plamo33
  • はてなプラグイン25
  • php23
  • Node.js18
  • Ubuntu16
  • SASS16
  • laravel415
  • Chrome11
  • cms-style10
  • iPhone9
  • Git入門6
  • ConoHa WING6
  • genesis6
  • Python5
  • Android5
  • PC全般4
  • Facebook4
  • スマートフォン4
  • Xserver3
  • Firefox3
  • 静的サイトジェネレーター3
  • SSD3
  • Docker3
  • Blankslate3
  • Twitter2
  • Mactype2
  • GitHub2
  • youtube1
  • はてなブクマ1
  • rails入門1
  • 映画1

Footer

My Web Sites

  • @半径とことこ60分
  • そんなには褒めないよ。映画評
  • IMUZA.com
  • GitHub

Related Sites

  • WordPress公式
  • WordPress関数リファレンス
  • PHPマニュアル

Contact Us

  • お問い合わせフォーム
  • Twitter
  • Facebook
  • Feedly

Copyright © 2023 · IMUZA.com