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

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

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

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

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

はじめに

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

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

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

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

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

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

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

【はてなブログ】記事の途中に飛ばす！アンカーリンクの使い方！

2019.5.20

今回は、はてなブログで「クリックすると記事の途中まで飛ばすアンカーリンク」を使う方法について紹介します。 記事内に「〇〇まで進む」というようなリンクを設置することで、読者の方は自分に不要な部分を飛ばしたり、目的の場所まで自動スクロールさせることができます。 リンクを貼るときに、ちょっとしたキーワー...

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を設定してみました。

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

まとめ

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

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

【はてなブログ】記事下にサムネ付きのフォローボタン（この記事が気に入ったら〜）を設置する方法！

2018.4.16

今回は、はてなブログの記事下に「フォローボタン」を追加する方法を紹介します。 その記事のサムネイルと一緒に「この記事が気に入ったら〜」を表示することで、フォローしてくれる可能性が増えたり、読者を増やすことができるので試してみてください。...

ではまた。