その他 プラグイン

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

投稿日:

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

導入手順

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

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


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

 ⇒ [jQuery] CDNでjQueryを使う

2)画像を用意する

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

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

3)コーディングする

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

4)動作確認する

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

設定

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

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

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

解説

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

スポンサーリンク

スポンサーリンク

-その他, プラグイン

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

[jQuery UI] リサイズを実装する(Resizable)

jQueryUIでリサイズを実装するサンプルです。 サンプルソース 例)jQuery UIを使ったリサイズのサンプル [ ...

[jqGrid] 指定したセルの値を書き換える

jqGridで指定したセルの値を書き換えるするサンプルです サンプルソース 例)2行目の金額列の値を99999に書き換え ...

[jQuery UI] トグルボタンを実装する(Button)

jQueryUIでトグルボタンを実装するサンプルです。 サンプルソース 例)jQuery UIを使ったトグルボタンサンプ ...

[jQuery UI] ドラッグを実装する(Draggable)

jQueryUIでドラッグを実装するサンプルです。 サンプルソース 例)jQuery UIを使ったドラッグのサンプル [ ...

[jQuery UI] ソートを実装する(Sort)

jQueryUIで、リストをソートするサンプルです。 サンプルソース 例)jQuery UIでリストからソートするサンプ ...

スポンサーリンク