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

ページ内リンクをスムーズにスクロールさせるjQueryプラグインの紹介です。

スムーズスクロール系のJavascriptはいろいろありますが、このプラグインは以下の特徴があります。

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

１．デモ

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

２．準備

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

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

３．設置方法

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

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

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

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

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

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

（１）jQueryの読み込み

※すでの他のJavascriptなどを利用しており、jQueryを読み込み済みの場合には必要ありません。

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

（２）smooth-scroll.jsの読み込み

<script src="js/smooth-scroll.js"></script>

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

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

トップへ戻るためのボタンを設置する場合、利便性などを考えて「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;
}

 ５．参考サイト

以下、参考サイトです。