トップページ > Javascript,jQuery > jQueryで下方へスクロールしたらトップへ戻るボタンを表示して、スムーズにページトップへ帰るスクリプトを組んでみた

jQueryで下方へスクロールしたらトップへ戻るボタンを表示して、スムーズにページトップへ帰るスクリプトを組んでみた

Eyecatch jQuery

正式名称はよくわかりませんが、下スクロールで戻るボタンをふわっと表示させ、クリックするとページの上部へスルスルっとスクルールし、再びふわっと消えるというスクリプトです。
以前にこなした内容の復習ってことで戻るボタンもテキストではなく画像にし、ファイル名末尾に「_on」をつけた画像で差し替えも行なってみました。

ちょっとした事を数行で実装できるjQueryって改めて凄い&面白いなぁ。

イメージ / サンプル

(よくわからない)イメージ

go page top IMAGE

デモ

デモスクリプトはこちらから(別ウィンドウが開きます)

スクリプト

HTML

ボタン画像を先頭へ記述。
jQueryを使って、座標 0 に戻るスクリプトなので、リンク(aタグ)ではなく、pタグをクリック対象とし、<a name=”top”> というのもやめてみました。
不具合は多分、無いはずです。

CSS

領域を画像サイズと同じ、横:50px、縦:50px、表示位置をそれぞれ底から 10px、右から 20px にしています。
今回のスクリプトに関するCSSはこれだけです。

JS

ではjavascript部分。

大体、行なっている処理はわかると思いますが、各行にコメントを付けてみました。
そう大したことはしていませんが、動けばいいのですよ! と自分を納得させて書いてみました(苦笑

【1】の scrollTop() > 100 で、今回はブラウザ上から100ピクセル数以上になった場合に出現させています。
この数値で出現位置を調整可能です。

【2】の 350 は、スクロールスピードとなります。
もう少しゆっくりスクロールさせたい場合は、500など、大きい数値にすれば可能。

【3】の return false; は a 要素に clickイベントを設定する際に必要な記述になります。
今回のような、ページ内を移動させるがためのスクリプトの場合は目立ちませんが、例えば <a> タグをクリックした時に文字色を変更するなど、移動以外の動作をさせたい場合にリンク先へ移動してしまうのを防ぐための記述となります。

特にどうってことはないスクリプトなので、今回はプラグインにはしませんでしたが、コメント頂ければプラグインも作ってみたいと思います。

デモ

デモスクリプトはこちらから(別ウィンドウが開きます)