Javascript(jQuery) ボタンクリックでページのトップにスクロールして戻る方法
Javascript(jQuery)でボタンクリックでページのトップにスクロールして戻る方法です。
このサイトでも利用していますが、ページを下にスクロールすると、右下に矢印画像が表示されます。矢印ボタンをクリックすると、ページのトップへ戻ってくれる優れものです。
縦に長いページは、マウスホイールやスクロールバーを使って戻るのは面倒ですから、この機能を実装することをおすすめします。
サイト閲覧者のために、ユーザビリティを向上させましょう！
当サイトは現在この方法を利用しておりません。
目次
ライブラリファイルのダウンロード
この機能は jQuery Scroll to Top Control というプラグインで動作します。
配布先サイトから、「scrolltopcontrol.js」という JavaScript ファイルと、ボタン画像をダウンロードします。ボタン画像は自分で作ったものでも利用できます。
ダウンロードしたファイルを、任意の場所にアップロードすればOKです。
実装サンプル
まず、実装したいページの head タグ内に、jQueryライブラリ を GoogleAPI(Google Developers) から読込の読み込ませます。
次に、script タグで 「scrolltopcontrol.js」 を読み込ませます。
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script type="text/javascript" src="scrolltopcontrol.jsの場所を指定"></script>
</head>
この記事での jQuery のバージョンは、Ver.1.5.1 を使っています。既に利用されているようであれば記述を追加する必要はありません。
ボタン画像の保存場所は、scrolltopcontrol.js ファイルの中の記述で場所が指定されています。12行目を見てみましょう。
controlHTML: '<img src="up.png" style="width:48px; height:48px" />
ここで、ボタン画像の場所や大きさを変更できます。必要に応じて変更をおこないましょう。
すべてのファイルの修正が終わったら、ページをアップロードすれば実装完了です。
動作しなかったり、画像が表示されない場合、ファイルの場所やファイル名の指定が誤っている場合がほとんどですので、見直ししてみましょう。
動作オプション
特に変更をしなくても問題ありませんが、いくつか設定が変えられますので、ご紹介します。scrolltopcontrol.js ファイルの11行目と13行目を見てください。
setting: {startline:100, scrollto: 0, scrollduration:1000, fadeduration:[500, 100]}
controlattrs: {offsetx:5, offsety:5}
startline
どれだけスクロールしたらボタンが現れるかを設定できます。数値が大きいほど、より多く下までスクロールしてから現れるようになります。
scrollto
0=top か文字で戻り先を指定します。初期設定では 0 ですが、任意の戻り先(id)を指定できます。scrollto: ‘contents’と記述すると、
<div id="contents">
の位置に戻ります。
scrollduration
戻るためのスクロール時間を指定できます。数値が大きいほど戻るのに時間が掛かります。
fadeduration
ボタン画像が表示されたり非表示になったりする時間を指定できます。初期値では、表示が 500 、非表示が 100となっています。数値が大きいほど表示/非表示に時間が掛かります。
offsetx/offsety
ボタン画像の位置を設定できます。offsetx がウィンドウ右端からの距離で、offsety が下からの距離です。数値が大きいほどウィンドウの内側に寄ります。邪魔にならない位置に配置しましょう。
当サイトでは、以下のように設定しています。
setting: {startline:100, scrollto: 0, scrollduration:500, fadeduration:[500, 100]}
<img src="scrollup.png" style="width:70px; height:70px" />
controlattrs: {offsetx:5, offsety:5}
まとめ
Javascript(jQuery)でボタンクリックでページのトップにスクロールして戻る方法を紹介しました。
画像も張っておきますので、よかったら使ってください。
おつかれさまでした。