その他 プラグイン

[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

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

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)

スポンサーリンク