[Plugin] アニメーションでページトップに戻るボタンを実装する（jQuery Scroll to Top Control）

投稿日：2018年8月21日

アニメーションでページトップに戻るボタンを実装するには、
「jQuery Scroll to Top Control」というプラグインを使うと便利です。

導入手順

１）「jQuery Scroll to Top Control」をダウンロードする

以下公式ページから、scrolltopcontrol.js をダウンロードします。
http://www.dynamicdrive.com/dynamicindex3/scrolltop.htm

実行には、jQuery本体も必要なのでjQueryもご用意ください。
※CDN版を使うとダウンロードしなくてもよいため便利です。

　⇒ [jQuery] CDNでjQueryを使う

２）画像を用意する

ボタンのアイコン画像を用意します。
上記公式ページ内にもサンプルのアイコンがあるのでそれを利用してもいいですし、フリー素材のサイトからダウンロードしてもOKです。
画像を用意したらup.pngという名称でhtmlファイルと同じディレクトリに置きます。

設定を変えれば別のファイル名にもできます。ここでは取り敢えずup.pngとします。

３）コーディングする

例として以下のようにコーディングします。
この例だと、sample.htmlと同じディレクトリにscrolltopcontrol.jsを配置します。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>「jQueryScrolltoTopControl」サンプル</title>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="scrolltopcontrol.js"></script>
</head>
<body style="height:2000px;">
  <p>スクロールすると、ToTopアイコンが画面右下に表示されます。</p>
</body>
</html>

<!DOCTYPE html>

<head>

<title>「jQueryScrolltoTopControl」サンプル</title>

</head>

<p>スクロールすると、ToTopアイコンが画面右下に表示されます。</p>

</body>

</html>

４）動作確認する

サンプルソースをブラウザで表示し、スクロールさせると右下にアイコンが表示され、クリックするとページトップへアニメーションしながら戻ります。

設定

scrolltopcontrol.jsファイル内の以下パラメータの値を変えることにより、動きや見た目を変えることができます。

【scrolltopcontrol.jsの設定】
setting	startline	アイコンが出現するスクロール量を数値で指定する（デフォルト100）
	scrollto	戻り先を0またはid名で指定（例）　画面トップへ戻る場合 ⇒ scrollto:0 　id="a1"へ戻る場合 ⇒ scrollto:'a1'
	scrollduration	TOPへ戻るまでの時間（デフォルト1000ミリ秒）
	fadeduration	アイコン出現時と消滅時のアニメーションの時間を指定（例）出現時は0.5秒、消滅時は0.1秒にする　⇒fadeduration:[500, 100]
controlHTML	src	アイコンのパス（デフォルトは"up.png"）
	width	アイコンの幅（デフォルトはwidth:48px;）
	height	アイコンの高さ（デフォルトはheight:48px;）
controlattrs	offsetx	画面右下を起点としたx座標位置（デフォルトはoffsetx:5）
controlattrs	offsety	画面右下を起点としたy座標位置（デフォルトはoffsety:5）

上記パラメータはscrolltopcontrol.jsファイル内にあります。
　（settingは11行目位、controlHTMLは12行目位、controlattrsは13行目位。）

解説

上記のパラメータ以外にも設定できる項目があります。

執筆者：とら