jQueryでページ内リンクをスムーズにスクロールさせるJavascript 「smooth-scroll.js」

※特定の条件下で動作しないバグを修正しました。またwordpressサイトへの導入に対応しました。2016/05/15

ページ内リンクをスムーズにスクロールさせるjQueryプラグインの紹介です。
スムーズスクロール系のJavascriptはいろいろありますが、このプラグインは以下の特徴があります。

  • 「href=”#top”」へのリンクは、ページ内に「#top」が存在しなくてもページトップへ戻る。
  • 「トップへ戻る」ボタンなどに「scroll-fade」というクラス名を追加すると、ページスクロール後にフェードインする効果をつけられる。
  1. デモ
  2. 準備
  3. 設置方法
  4. オプション機能「フェードインボタン」
  5. 参考サイト

1.デモ

動作確認用デモページはこちら

2.準備

まず通常のページ内リンクを設置しておきます。
以下のコードをページ下部に記述してください。

<a href="#top">ページトップへ戻る</a>

3.設置方法

手順1 「smooth-scroll」のダウンロード

以下のリンクをクリックしsmooth-scrollのスクリプトをダウンロードしてください。
Smooth-scroll

手順2 「smooth-scroll」用ファイルの配置

ダウンロードした圧縮ファイルを展開し、「js」フォルダのみをローカルサイトフォルダに配置してください。

手順3 スクリプト読み込みコードの記述

以下のコードをスムーズスクロールさせたいページの<head>タグ内に記述してください。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="js/smooth-scroll.js"></script>

これでページ内リンクがスムーズにスクロールするようになります。

4.オプション機能「フェードインボタン」

トップへ戻るためのボタンを設置する場合、利便性などを考えて「position:fixed」を用いた固定ボタンとすることが多いです。
その際には、ファーストビュー内ではボタンは表示されず少し下にスクロールしてはじめてボタンが表示される、という仕掛けを施したサイトをよく見かけます。

これを実装するオプション機能をつけました。
設置方法は以下の通りです。

固定ボタンを用意する

「position:fixed」をかけた固定ボタンを用意し、「display:none」で非表示にしておきます。
また、クラス名に「scroll-fade」を追加します。

HTML

<p class="back-top scroll-fade"><a href="#top">トップへ</a></p>

CSS

.back-top {
  position: fixed;
  bottom: 3%;
  right: 5%;
  display: none;
}

5.参考サイト

以下、参考サイトです。