デザイン制作、Web制作、ブログ運営などのノウハウを配信するサイト

スクロールに追従する「トップへ戻るボタン」を作成する方法


こんにちは、koheiです。

今日は、久しぶりにjQueryネタです。
最近のWebサイトでよく見るスクロールに追従する「トップへ戻る」ボタンの作成方法をご紹介します。

スポンサーリンク

「トップへ戻る」ボタンの配置

まずは、htmlファイルもしくは、phpファイルに「トップへ戻る」ボタンを配置しましょう。
私はWordPressを使用しているので、footer.phpに記載しました。

【footer.php】

ボタン全体をclass名“page-top”というdiv要素で囲みます。
ボタンは、page_top.gifという画像を配置してます。(別に文字列でも構いません。)

ボタンのCSS設定

次にCSSを以下のように設定します。

【style.css】

ポイントは、position:fixedを指定することです。
これで、ページがスクロールされても同じ場所に配置されます。
位置は、right,bottomなどで、ちょうどよい場所に配置してください。
z-indexは重なり順です。最前面に表示させるため、99を指定しています。

jQueryの実装

jQueryは以下のように実装します。

【my_script.js】
※WordPressのjQueryスクリプトでは、他のパッケージとの競合を防ぐ為、$マークをjQueryに書き換えています。

5行目でまずは、TOPへ戻るボタンを非表示にしています。
7行目〜13行目は、スクロール量が100に到達したら、ボタンを表示させ、スクロール量が100より小さい場合は、非表示にしています。
15行目以降は、トップへ戻るボタンをクリックした時に、トップ位置まで移動させる処理です。
トップへ戻すスピードは、18行目の数値で調整します。(上記は、500msecを指定しています)

最後に

いかがでしょう?
縦長のサイトなどは、トップへ戻るボタンが追従してくれるととても便利ですよね。
ぜひ活用してみてください!!

それでは!

スポンサーリンク

いいね!を押すと、
最新記事をお届けします。

Twitter で

ブログ用WordPress無料テーマ
「chameleon(カメレオン)」

WordPressテーマ(chameleon)は、「WordPressで手軽・気軽にブログ始められる」をコンセプトに制作しました。
初めてWordPressでブログを始める方、是非シンプルなテーマchameleon「カメレオン」を使ってみてください!

ブログ用無料WordPressテーマ

士業用WordPress無料テーマ
「InomaExpertBasic」

士業用の無料WordPressテーマを作成しました。
もちろん、一般的なビジネスサイトに活用できます。
自分でサイト更新したい方、
これからホームページを立ち上げようとする方、
自分でWordPressテーマを作ってみたい方、
この無料テーマを是非活用してみてください。

無料WordPressテーマ

コメントを残す

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

CAPTCHA


ページトップボタン