【はてなブログ】jQueryで自動スクロールを滑らかにさせる方法！

今回は、はてなブログの記事内スクロールを「滑らか」にする方法について紹介します。

以前紹介したような「記事の途中まで飛ばすリンク」や「目次をクリックした時のスクロール」で使えると思います。

 

名称は「スムーススクロール（スムーズスクロール）」

jQueryを追加するだけで簡単なのでチェックしてみてください。

はじめに

 

今回紹介する内容は「はてなブログのスクロールを滑らかにする方法」について。

 

 

リンクをクリックしたとき、ウィーンと「徐々にスクロール」するブログを見たことはありませんか。

私のブログだと「目次をクリックした時」なんかで実装してあります。

 

まずは、実際の動作を確認してください。

 

 

 

一瞬で切り替わるのではなく自動でスクロールした感じになるので、移動した距離や位置がわかりやすくなりますね。

見た目的にも良いので実装してみてください。

 

ちなみに、記事の途中まで飛ぶリンクを作成する方法はこちらからどうぞ。

 

 

jQueryを追加する

 

はてなブログでjQueryを使う場合、以下のようなコードを記述します。

 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>

 

このようなコードを、はてなブログの詳細設定から「headに要素を追加」にコピペしましょう。

過去にjQueryを使ったことがあり、すでに記述してある場合は不要。

 

 

jQueryの準備はこれだけでOKです。

 

リンクを滑らかにスクロールさせよう

 

では、実際に滑らかなスクロールを実装していきましょう。

はてなブログ > デザイン > 記事下 に以下のようなコードを追加してください。

 

<script type="text/javascript">
    document.addEventListener("DOMContentLoaded", function() {
        $('.entry-content a').on('click', function() {
            $('html, body').animate ({scrollTop: $(this.hash).offset().top},600);
            return false;
        });
    });
</script>

 

 

実際に操作してみるとこんな感じになりました。

 

 

リンクをクリックしたら滑らかに移動しましたね。

このようなスクロールは、値を変更することで「スクロール速度」や「細かい位置調整」ができるので見ていきましょう。

 

animateの値を調整しよう

 

今回使用した「animate」では以下のような設定が記述してあります。

 

 

それぞれの値を調整することで、スクロールの完了時間やオフセットを変更できます。

 

アニメーション速度を調整する

 

animateは、スクロールが完了するまでの時間を「ミリ秒」で指定できます。

試しに以下のように書き換えてみてください。

 

<script type="text/javascript">
    document.addEventListener("DOMContentLoaded", function() {
        $('.entry-content a').on('click', function() {
            $('html, body').animate ({scrollTop: $(this.hash).offset().top},100);
            return false;
        });
    });
</script>

 

「600」と書かれていた部分を「100」に変更してみました。

このようにすると「100ミリ秒（0.1秒）」でアニメーションが完了します。

 

 

 

アニメーション完了の値は「ミリ秒（1000で1秒）」なので、値を大きくすればゆっくりスクロールし、小さくすればスクロールが早くなります。

 

 

スクロールの目的地を調整する

 

最後に、スクロール後の位置を調整してみましょう。

先ほどのコードに、以下のような記述を追加してみてください。

 

<script type="text/javascript">
    document.addEventListener("DOMContentLoaded", function() {
        $('.entry-content a').on('click', function() {
            $('html, body').animate ({scrollTop: $(this.hash).offset().top - 100},600);
            return false;
        });
    });
</script>

 

「top」の後ろに「-100」という処理が追加されています。

このようにすると「スクロールの目的地 - 100px」みたいな感じで、目的地より「100px上にスクロール」させることができます。

 

 

ページ上部に「追従型グローバルナビゲーション」や「ヘッダー」がある場合、目的地ぴったりに移動すると隠れてしまいますよね。

そういったときに、余裕を持たせてスクロールさせるために-100を設定してみました。

 

 

 

同じようにして、サイトレイアウトにあった値を指定してみてください。

 

 

まとめ

 

今回紹介した方法を使うことで、はてなブログの記事内スクロールを「滑らか」にすることができました。

同じ感じで「目次」や「トップに戻るボタン」なんかにも、スムーススクロールを実装できると思うのでぜひ試してみてください。

 

 

ではまた。