Vol.18 スクロールで「ページのトップに戻る」ボタンを出現させる

2014/11/08 up カテゴリー : WEBの現場から！

ページのトップへ
スライドショーに続いて、スクロールすると「ページのトップに戻る」ボタンが出現するjQueryプラグインを実装していく。まずは完成形を見てもらおう。PCで表示して、ブラウザ幅を縮めてみたりして下へスクロールしてみよう。
　
【トップに戻るボタン出現】
　

必要ファイルをダウンロード

→up.png（zip）

→scrolltopcontrol.js

まず画像をダウンロードして解凍した「up.png」を「sample」フォルダ内「images」フォルダの中に入れる。「Retinaディスプレイ」対策として実際に使用する倍の大きさのサイズにしてある。
　
続いて「scrolltopcontrol.js」のリンク先にあるソースをコピーして「scrolltopcontrol.js」と名前を付けて保存。「sample」フォルダ内「js」フォルダの中に入れる。

head内にスクリプトを読み込む

下記ハイライト部分を追加。コード内を右上の「ソースを表示からコピー」。
　
「index.html」

<head>

/* 省略 */

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.heightLine.js"></script>
<script type="text/javascript" src="js/responsiveslides.js"></script>
<script type="text/javascript" src="js/responsiveslides.min.js"></script>
<script type="text/javascript" src="js/function.js"></script>
<script type="text/javascript" src="js/scrolltopcontrol.js"></script>

/* 省略 */

</head>

「scrolltopcontrol.js」の設定をする

さきほど「js」フォルダに入れた「scrolltopcontrol.js」ファイルを開き、12行目あたりの画像のパスとサイズを変更する。
　
「scrolltopcontrol.js」

controlHTML: '<img src="up.png" style="width:48px; height:48px" />'

下記のように変更。

controlHTML: '<img src="./images/up.png" style="width:47px; height:66px" />'

　
11行目あたりの動作のオプションの「scrollduration」の部分を、

setting: {startline:100, scrollto: 0, scrollduration:1000, fadeduration:[500, 100]},

下記のように変更。

setting: {startline:100, scrollto: 0, scrollduration:500, fadeduration:[500, 100]},

　
13行目あたりのボタンの位置指定の部分を、

controlattrs: {offsetx:5, offsety:5},

下記のように変更。

controlattrs: {offsetx:0, offsety:20},

　
以下、動作オプションの説明。自分の好みに合わせて変更しよう。

setting: {
startline:100, //ボタンが表示されるスクロールのタイミング
scrollto: 0, //0でトップへ戻る。id指定でその場所へスクロール
scrollduration:1000, //スクロールのスピード
fadeduration:[500, 100] //フェードイン,アウトの時間
},
 
controlattrs: {
offsetx:5, offsety:5 //ボタンの位置指定
},

　
これで完成。ではご賞味あれ。
　
【トップに戻るボタン出現】
　