ウィンドウを下にスクロールしたときにトップへ戻るボタンを表示させるjQueryのコード

少し前からですが、画面を下にスクロールした時にトップへ戻るボタンが表示されるようなブログが増えてきました。私のブログでも例にもれずに簡単なアニメーションするボタンを自前で実装しました。今回のエントリーではその「アニメーションするトップへ戻るボタン」の作り方を紹介します。

↓このブログではこんな感じです。
20131116_001

画面を下にスクロールすると矢印のボタンが「にゅ~」っと表示されます。大まかに説明すると、アニメーション部分はjQuery、ボタンのレイアウト、配置はCSSでやっています。まずはボタンを実装したいページにjQueryの本体を読み込みます。

まぁjQueryのバージョンは何でもいいと思いますが、できれば最新の物を使いましょう。
それでHTMLのソースコードはこんな感じにします。

bodyタグ内のみを記述。
フッターの

が表示させたいトップへ戻るボタンの画像です。

ページのCSSは以下のように。

CSSでのポイントはまずp#toTopをposition:fixed;とbottom:0px;でウィンドウの下部に固定してしまいます。
left:50%で画像の位置をウィンドウの中央に寄せ、さらにmargin-left:450px;でさらに右の方へ移動させます。450px;の部分はレイアウトに合わせて数値を変更させたらいいでしょう・・・

さて、jQueryのコードですが、以下のようにしました。

ポイントはどれくらいスクロールしたときにボタンを表示させるのか? という点と、ボタンをクリックしたときにどれくらいの速さでトップへスクロールさせるのかという点です。また、「topBtn.hide();」で初期状態ではボタンを非表示にしています。

この例では「scrollTop() > 100」の部分で100という数値を設定しています。この100という数値分下へスクロールした場合、ボタンがslideDown()によって表示されます。スクロール位置が100以下になった場合はslideUp();によりボタンを非表示にさせます。

具体的に確認できるようにサンプルを作りました。

ウィンドウを下にスクロールしたときにトップへ戻るボタンを表示させるjQueryのコード(その1)

またボタンのアニメーションをslideDown()、slideUp()から、fadeIn()、fadeOut()に変更したサンプルも作りました。

ウィンドウを下にスクロールしたときにトップへ戻るボタンを表示させるjQueryのコード(その2)

ソースコードはほぼ同じなので、サンプルのソースを見てどのようになっているのか把握してください。


この記事をかいた人

ドレッド Webクリエイター

WordPressの構築やjQueryによる動的サイトの実装が得意なWebクリエイターです。このブログではWeb制作で役に立ちそうな知識から、プライベートの出来事まで幅広いネタを取り扱っております。ご質問、ご要望はお問合せフォームからどうぞ! お仕事のご依頼はコレカラウェブへ! 2016年10月から放送大学に入学(選科履修生)

jQuery | Posted on 2013/11/16 07:56

※コメントは管理人の承認後に公開されます。

コメントを残す

メールアドレスが公開されることはありません。