English | Japanese

jQuery Plugin
BACK TO THE TOP

jQuery Plugin「Back to the Top」は、ページの先頭 (トップ) へスムーズにスクロールして戻るjQueryプラグインです。px 単位で指定したり、ページ内のアンカーリンクもスムーズにスクロールして移動してくれます。

Settings

  1. jQuery 本体の設定
  2. jquery.easing の設定
  3. jquery.backtothetop.js の設定
  4. HTMLにページ内リンクを設定
  5. 動作確認

1. jQuery 本体の設定

jQuery (1.71 以上) をページに読み込みます。

jquery.com から jQuery 本体をダウンロード。または CDN から配信している jQuery 本体を設定します。

設定方法は「Download jQuery」から。

    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://code.jquery.com/jquery-migrate-3.3.2.min.js"></script>

2. jquery.easing の設定

スクロールに動き (easing) を与える jquery.easing をページに読み込みます。

jQuery だけで利用できる easing は、linear と swing の2種類だけですが、jquery.easing を読み込むだけで easing の種類を増やせます。スクロールの動きを追加したい場合、読み込んでください。

jquery.easing をダウンロード。または CDN から配信している jquery.easing を設定します。

jquery.easing のダウンロードはこちらから。CDN から配信している jquery.easing を設定する場合はこちらから。

jQuery UI でも easing が利用可能です。詳細はこちらから。

<script src=""https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.4.1/jquery.easing.min.js""></script>

3. jquery.backtothetop の設定

jquery.backtothetop.js をページに読み込みます。

jquery.backtothetop.min.js をダウンロードして、HTMLにスクリプトタグを以下のように設定します。

<script src="https://DOMAIN/PATH/TO/jquery.backtothetop.min.js"></script>

4. HTMLにページ内リンクを設定

普通のページ内リンクで。スクロールの動き (easing) や速さを設定する場合は、「Settings > Advanced」を参考にオプションを設定。

ページの先頭へ

  1. アンカーリンクの href 属性に # を加えます。
  2. アンカーリンクの id 属性に backtothetop-fixed を加えます。

サンプル

html 
<body>

...

<a href="#" id="backtothetop-fixed">Back to the Top</a>

きちっと属性値を付けるやり方は下記の通り。

  1. アンカーリンクの href 属性に #** を加えます。属性値はお好みで。
  2. アンカーリンクの id 属性に backtothetop-fixed を加えます。
  3. スクロールの停止位置となるタグに id 属性 ** を加えます。

サンプル

html 
<body id="top">

...

<a href="#top" id="backtothetop-fixed">Back to the Top</a>

ページ内リンク

  1. アンカーリンクの href 属性に #** を加えます。属性値はお好みで。
  2. スクロールの停止位置となるタグに id 属性 ** を加えます。

サンプル

html 
<a href="#link">link</a>

...

<h1 id="link">header</h1>

5. 動作確認

スクロールするどうか動作を確認します。

以上。

Advanced Settings

data-* 属性を使ってカスタマイズすることができます。

ページの先頭へ

  1. アンカーリンクの href 属性に #** を加えます。属性値はお好みで。
  2. アンカーリンクの id 属性に backtothetop-fixed を加えます。
  3. 使用可能なオプションを参考に、アンカーリンクの data-* 属性を加えます。

サンプル

html 
<a href="#top" id="backtothetop-fixed"
 data-backtothetop-duration="600"
 data-backtothetop-easing="easeOutQuart"
 data-backtothetop-offset="100"
 data-backtothetop-fixed-scroll-offset="500"
 data-backtothetop-fixed-fadeIn="1000"
 data-backtothetop-fixed-fadeOut="1000"
 data-backtothetop-fixed-display="bottom-right"
 data-backtothetop-fixed-bottom="10"
 data-backtothetop-fixed-right="10"
>Back to the Top</a>

ページ内リンク

  1. アンカーリンクの href 属性に #** を加えます。属性値はお好みで。
  2. 使用可能なオプションを参考に、アンカーリンクの data-* 属性を加えます。

サンプル

html 
<a href="#top"
 data-backtothetop-duration="600"
 data-backtothetop-easing="easeOutQuart"
 data-backtothetop-offset="100"
>link</a>

Options

使用可能なオプションは、共通のオプション属性 data-backtothetop-* とページの先頭への属性 data-backtothetop-fixed-* があります。

data-* 属性 データタイプ デフォルト値 説明
data-backtothetop-scrolltop 数値 (px) undefined px 指定によるスクロールの停止位置
id 属性での指定より優先されます
data-backtothetop-duration 数値 (ミリ秒) 300 アニメーションの動作期間
data-backtothetop-easing easing 名 swing エフェクトイージング
data-backtothetop-offset 数値 (+-px) 0 停止位置の基準点をずらします
data-backtothetop-hash ブール型 true ブラウザに履歴を追加
data-backtothetop-fixed-scroll-offset 数値 (px) 0 ページの先頭へリンクを表示するスクロール位置
data-backtothetop-fixed-fadeIn 定義済み値 (slow | normal | fast) または 数値 (ミリ秒) slow フェードインの速度
data-backtothetop-fixed-fadeOut 定義済み値 (slow | normal | fast) または 数値 (ミリ秒) slow フェードアウトの速度
data-backtothetop-fixed-display 定義済み値 (bottom-right | bottom-left | top-right | top-left) bottom-right リンクの表示位置
data-backtothetop-fixed-top 数値 (px) 0 リンク表示の余白 (マージン)
data-backtothetop-fixed-bottom 数値 (px) 0 リンク表示の余白 (マージン)
data-backtothetop-fixed-left 数値 (px) 0 リンク表示の余白 (マージン)
data-backtothetop-fixed-right 数値 (px) 0 リンク表示の余白 (マージン)
data-backtothetop-fixed-zindex 数値 999 要素の重なり順

Required

Download

Download latest version

Repository

パッチやバグ報告、プルリクは、Github からどうぞ。

Changelog

License

Dual licensed under the MIT and GNU General Public License v2.0 (GPLv2) licenses.

Copyright (c) 2012-2015 by thingsym

The MIT License (MIT)

以下に定める条件に従い、本ソフトウェアおよび関連文書のファイル（以下「ソフトウェア」）の複製を取得するすべての人に対し、ソフトウェアを無制限に扱うことを無償で許可します。これには、ソフトウェアの複製を使用、複写、変更、結合、掲載、頒布、サブライセンス、および/または販売する権利、およびソフトウェアを提供する相手に同じことを許可する権利も無制限に含まれます。

上記の著作権表示および本許諾表示を、ソフトウェアのすべての複製または重要な部分に記載するものとします。

ソフトウェアは「現状のまま」で、明示であるか暗黙であるかを問わず、何らの保証もなく提供されます。ここでいう保証とは、商品性、特定の目的への適合性、および権利非侵害についての保証も含みますが、それに限定されるものではありません。 作者または著作権者は、契約行為、不法行為、またはそれ以外であろうと、ソフトウェアに起因または関連し、あるいはソフトウェアの使用またはその他の扱いによって生じる一切の請求、損害、その他の義務について何らの責任も負わないものとします。

https://www.opensource.org/licenses/mit-license.php

GNU General Public License v2.0 (GPLv2)

https://www.gnu.org/licenses/gpl.html

Back to the Top