Home
Menu
Side
Twitter
Top
ホーム / Blogger | Blogger/カスタマイズ |

ページ内リンクを 「 すぅ～っと 」 スムースにスクロールさせたい

2020/05/18

Blogger Blogger/カスタマイズ

こんにちは！ HARU（ @HARU ）です。

ブログを書いているとたまに使うページ内リンクですが、よくあるスムースに「 すぅ～と 」スクロールされるようにしたくないですか？

実はこれ簡単に実装することができるのです。

たまにと言いましたが、実際は「 目次 」や「 トップへ戻るボタン 」などにも適用されるので、実装するといろいろなところに影響が出ますよね。（ いい意味で ）

ということで今回は、ページ内リンクにスムースなスクロールアニメーションを付ける方法をご紹介します。

注意

テンプレートの編集（ ソースコード改変 ）するときは、必ずバックアップを取ってから編集しましょう。

不安な方は以下の関連記事を参照してください。

JQuery の導入

JQuery の導入をしていない場合、以下の script を <head> の直下に記述します。


  <!-- JQuery -->
  <script src='https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js'/>

ページ内リンクスクロールアニメーション Script

ページ内リンクをスムースにスクロールするため、以下の Script を </body> の直上に記述します。


  <!-- ページ内リンクスクロール -->
  <script>
    jQuery(function() {
      var pagetop = $('#page_top');
      pagetop.hide();
      $(window).scroll(function () {
        if ($(this).scrollTop() > 100) {  //100pxスクロールしたら表示
          pagetop.fadeIn();
        } else {
          pagetop.fadeOut();
        }
      });
      $('a[href^="#"]').click(function(){
        var headerHight = 0;  //ヘッダーの高さpx
        var time = 500;
        var href= $(this).attr("href");
        var target = $(href == "#" ? 'html' : href);
        var distance = target.offset().top-headerHight;
        $("html, body").animate({scrollTop:distance}, time, "swing");
        return false;
      });
    });
  </script>

動作イメージ

以下のように a タグを用いてボタンを作成して、ページ内リンク先座標を指定するとページ内リンクを作ることができます。


  <p><a href="#example">リンク先に移動するボタン</a></p>
  <!-- 省略 -->
  <p id="example">ページ内リンク先座標</p>

試しに以下のボタンをクリックしてみましょう。

クリックするとリンク先に移動する

ヘッダーにナビゲーションバーを固定している場合

ヘッダーにナビゲーションバーを固定していると、ページ内リンク先でナビゲーションバーとリンク先の文字が重なってしまいます。

そこでナビゲーションバーの分だけ、ページ内リンク先のオフセットをします。

先ほど記述した、「 ページ内リンクスクロールアニメーション Script 」内の var headerHight = 0; //ヘッダーの高さpx の値をナビゲーションバーの高さより大きく指定してください。

ナビゲーションバーの高さがわからない場合は、少しずつ値を調整して確認してみましょう。

ちなみに私のブログの場合、値の設定値は「 40 」です。


  <!-- ページ内リンクスクロール -->
  <script>
    jQuery(function() {
      var pagetop = $('#page_top');
      pagetop.hide();
      $(window).scroll(function () {
        if ($(this).scrollTop() > 100) {  //100pxスクロールしたら表示
          pagetop.fadeIn();
        } else {
          pagetop.fadeOut();
        }
      });
      $('a[href^="#"]').click(function(){
        var headerHight = 40;  //ヘッダーの高さpx
        var time = 500;
        var href= $(this).attr("href");
        var target = $(href == "#" ? 'html' : href);
        var distance = target.offset().top-headerHight;
        $("html, body").animate({scrollTop:distance}, time, "swing");
        return false;
      });
    });
  </script>

一緒にブログに実装しよう

ページ内リンクにスクロールアニメーションを追加したので、せっかくなら活用したいですよね。

そこで以下の２つは、ここで一緒に実装することをオススメします。

トップへ戻るボタン
目次を追加する

動作イメージ（ ページ内リンク先 ）

動作のイメージは掴めましたか？

ヘッダーナビゲーションを固定している方は、以下のボタンをクリックし次項以降を読んでください。

ヘッダーにナビゲーションバーを固定している場合

QooQ