[Я]トップに戻るボタンをjQueryでニュルッと改造する

スポンサーリンク

これまで設置してた「トップに戻る」ボタンの難点

魚のヌルッとした手触りが苦手で釣りに行きません。りく(@Rikuma_)です。

ブログやサイトなどで、ページの右下だったり左下だったりに「トップに戻る」「PAGE TOP」などといったボタンが設置されているのをよく見かけますよね。

当ブログでも開設当初から設置してました。

旧バージョンのトップに戻るボタン

↑当ブログに以前設置してたボタン。「ページ先頭へ」をクリックするとページの先頭に移動する機能です。ボタンの位置はCSSで固定にしていますので、スクロールしてもボタンの位置は変わりません。

これはこれで最初は満足してたんですが、途中で「あること」に気付いた、というか再認識しました。

たとえば、当ブログのトップページを最初に表示した時、ChromeだとブラウザのURLには「rikumalog.com」と表示されます。

Chromeで見たURL

↑これがPCブラウザの「Chrome」で見た場合。「rikumalog.com」と表示されてて、正常な状態。

IE9で見たURL

↑IE9だと、フルパスの「http://rikumalog.com/」と表示されてます。

で、ここからが問題点なのですが、旧バージョンの「ページ先頭へ」ボタンをクリックすると、ページ先頭に戻った後に、

URLに文字が追加されてしまった

↑URLのお尻に「#header」という文字が追加されてしまいます。

これはHTMLの仕様で、ボタンをクリックすると「id=”header”」と書かれてる位置に移動する命令を処理すると、最新の表示位置(=つまりheaderの位置)をURLが表示するので、正解といえば正解なんです。

しかし、この問題点は、たとえばブログを読んで下さった人がページをブックマークしてくれる際、もしも「トップに戻る」をクリックした後にブックマークすると?

「#header」がお尻に付いた状態でブックマークされちゃいますよね。ってことは、そのブックマークで再び読みに来てくれると、先頭からではなく「header」の位置から毎回表示されちゃうんです。それが個人的にとてもイヤだった。

URLを変更せずトップに戻る機能が欲しかった

いろんなブログを見てると、「トップへ戻る」ボタンをクリックして移動した後も、URLが変化してない(=つまりお尻に何も文字が加えられてない)ブログが幾つかありました。

さらには、ある程度の位置までページをスクロールするとボタンがフワーっとフェードインして出現するブログもあったり。

すごくカッコよく、どうやればこんな機能が作れるんだろう、と思い調べてみたら作り方が分かったので、自分でも作ってみました。

まずボタンのデザインを変更してみました

せっかくなので、ボタンのデザインも少しだけ変更してみることにしました。

HTMLに関しては以前と変更ありません。「header」という部分に戻れ、という命令も変えません。

CSSは少しだけ変えました。位置を少し内側に寄せ、ボタンのサイズと文字フォントを少し大きく、背景色も今までの「グレー」から「薄い緑」に変更。

↑ボタンのデザインは上のようになりました。これをjQueryでさらに改造していきます。

WordPressは先頭に「$」を付けると動作しませんので、「jQuery」という文字列に全て置き換えています。

↑2行目では、自分がHTMLで指定した「ボタンのクラスやID」を指定。

↑7行目は、ページの一番上から見てどの位置でボタンが出現するか(=フェードイン)を数値で指定します。上の例では「100」としてますが、この数字を大きくすればするほど出現位置はページの下側になります。

↑18行目の500という数値は、ボタンをクリックした時にトップへと戻るスクロールのスピードになります。数値を大きくするとスクロールのスピードが遅くなり、小さくすると速くなります。

これでボタンクリック後もURLに余計な文字は追加されなくなったし、スクロールのスピードもシュルシュルッという感じになりました。以前のは「パッ!」と瞬間移動する感じだったので、スクロールする今回の方が個人的には好き。

応用編:フェードインではなく「下からピョコッと顔を出す」ボタン

上で書いたのは「ある位置までスクロールするとボタンがフワッとフェードインして出現する」機能。

これの違ったアイデアとして、フェードインでなく「ページの下からピョコッと出現する」という機能もサンプルがありました。

HTMLとCSSは変えず、jQueryだけを変更します。

↑変更箇所をマーキングしています。個別に解説していきますね。

↑2行目は、ボタンの表示/非表示を判定する処理のオマジナイだと思って下さい。

↑5行目でボタンの初期位置をページの外側に設定。「見えてない状態」にしています。

↑9行目の「100」はフェードインの時と同じ、「ボタンが出現する位置」の指定。数値を大きくすると登場位置がページの下にズレます。

↑12行目は、ボタンを下からピョコッと登場させる指定。「20px」は画面下からの距離。「200」は登場する際のスピードのようですね。数値を大きくすると出現スピードが遅くなります。

↑17行目は12行目と逆で、「ある場所より上にスクロールしたとき、ボタンを画面下に消す処理」の指定。「-100px」は5行目で指定した値と合わせてます。「200」は12行目と同じでボタンの移動スピード。

これで完成です。jQueryってスゴイですね~。初心者の私でもこんな機能を実装できちゃう。

フェードインさせる機能、下からピョコッと登場させる機能の2つとも、以下のブログ記事を参考にさせていただきました。

http://www.webopixel.net/javascript/538.html

おかげでステキなボタンが設置できました。ありがとうございました。

スポンサーリンク
この記事がお気に召したら
「いいね!」をお願いします!
「りくまろぐ」の最新情報を
Facebookにお届けします