【JavaScript】スクロールしていくとフッターで止まる「ページトップに戻る」ボタンをCSSとjQueryでシンプルに実装する

画面をスクロールしたら「ページトップへ戻る」ボタンがフワッと現れ、
下までスクロールしていくとフッター辺りでピタッと止まるという例のあれ。

ちょっとした機能のわりにはまあまあ面倒くさい作業の一つです。

何故面倒くさいかと言うと、
サイトのデザインによって、コンテンツやフッターとの位置関係が様々なため、
毎回同じスクリプトを微妙に使えなかったりするからです。
レスポンシブだったりするとさらに面倒くささが増します。

これだけの事に時間を使いたくないので、
ボタンの位置やフワッとするアニメーション等はCSSに完全にまかせる形にして、
表示、非表示、止める、の切り替えは、jQueryのコードをポンと貼り付けるだけで実現できないかと思い、考えました。

DOMを弄る場合、やはりjQueryが楽です。

HTMLとCSSを準備

とりあえずサンプルとして、こんなページを用意しました。

サンプルページ

特別な事は何もしていません。かなり適当です。
ページトップボタンだけ、とりあえずposition:fixedにしてある状態です。

CSSでボタンの位置とアニメーションを設定

ボタンの位置とアニメーションをCSSで設定していきます。

今回、表示非表示等の切り替えは、jQueryでクラスを切り替える事で実現していきますので、
ボタンが表示されている状態の.showクラス、
ボタンが非表示になっている状態の.hideクラス、
ボタンがフッターで止まっている状態の.staticクラス
フワッとさせるアニメーションのキーフレーム
を、それぞれ設定していきます。

意外と長くなってしまいましたが、ほとんどがフワッとさせるアニメーションのための設定です。

何故display:noneじゃなく、heightを0にしたりしてるのかと言いますと、
フワッと表示させるだけなら、display:none/blockの切り替えとopacityだけで実現できるのですが、
非表示にする時は、このようにしないとフワッと消えてくれないのです。

フワッと表示→パッと非表示 という動きにする場合は、displayとopacityをキーフレームで動かすだけで可能です。
その場合は、.pagetopのoverflow:hidden;も必要なくなります。

このCSSは今回のサンプルページのためのCSSなので、
実際のCSSは、当然ですがサイトによって変わります。

必要なのは、
.showで表示した時の状態を設定
.hideで非表示の時の状態を設定
.staticで止まった時の状態を設定
というルールだけです。

下記のサンプルページを見ると、ページトップが表示されていませんが、
デベロッパーツールを使用してpagetopのタグにshowやhideやstaticを追加してみて、
クラスが切り替わった時にどうなるかを確認してみると良いと思います。

サンプルページ

jQueryで切り替え処理を書く

あとは、jQueryでクラスを切り替える処理を書くだけです。

ですが、問題はどのようにしてフッターで止める位置を判定するかです。

今までは、まずフッターの位置やウィンドウの高さを取得して、ボタンを止める相対的な位置を指定し、
レスポンシブの場合はリサイズイベントでフッターの位置、ウィンドウの高さを再取得して、スマホデザイン用のボタンの位置も指定し…

というような事をしていました。

それがおそらく普通のやり方だとは思いますが、
デザインやコーディングの仕方によっては、ボタンを止める位置の判定と実際に止まった時のボタンの位置が微妙にずれたり、なかなかすんなりと行かない事がよくありました。

このスクロール位置の判定をもっと簡単に、且つ汎用的にするために、ページトップボタンを2つ複製して、2つのクローンの位置関係で判定するようにしてみました。

サンプルページ

フッターの位置やウィンドウサイズの取得や、数値計算を全くしていない所がポイントかと思います。

見た目の部分はCSSに任せているので、レスポンシブにもこのままで対応できます。

全面的にjQueryを使用しているので、多少処理が重たいかもしれませんが、
おそらく大きな問題にはならないレベルではないかと思っています。

必要に迫られたら、scrollイベント内で無駄にメソッドを使用しないような作りにするかもしれません。

一応、コピペ用のコメント無しのコードも載せておきます。

当然ですが、jQueryの本体も読み込む必要がありますので、
HTMLも含めた全てのコードはサンプルのファイル(sample_3.html)をご参照ください。

 

「【JavaScript】スクロールしていくとフッターで止まる「ページトップに戻る」ボタンをCSSとjQueryでシンプルに実装する」への2件のフィードバック

  1. 初めまして
    サイトでjQuery.ScrollTo.jsを使用していて、急にchromedだけスクロールが動作しなくなり、
    調べていてこちらにたどり着きました。

    上記、参考にさせて頂きたいのですが、初心者の為、どこに記述していいのかわかりません。
    javaのファイルを別で作成するのでしょうか?
    前後になどいれるのでしょうか?
    教えていただけたら幸いです。
    よろしくお願い致します。

    1. ブログ開設以来初めてのコメントありがとうございます。

      この記事で紹介しているのは、画面の位置によってボタンの表示を切り替えるコードなので、
      jQuery.ScrollTo.jsが動作しなくなった事には関係が無いかもしれません。
      Chromeで動作しなくなったとの事なので、↓の記事の方が参考になるでしょうか。

      【JavaScript】Chromeの最新版(61)から画面スクロール量を取得する要素がdocument.bodyじゃなくてdocument.documentElementに変わっていた事を知った。

      ただ、確かに最新のChromeでスクロールの仕様が変わったんですが、
      jQuery.ScrollTo.jsのコードを見ると、今回の仕様変更とは関係無さそうなんですよね。。
      実際、私のChromeでは問題無く動作しました。

      このブログで紹介しているコードがお役に立てるかわかりませんが、
      もし使用する場合は、下記のいずれかのやり方で大丈夫です。
      ・HTMLファイルに直接書く(<script>タグの中に書く)
      ・別のJSファイルを作成して、読み込む
      ・既存のJSファイルに足す

      もし何か既存のJSファイルがあれば、そこに足すのが普通かもしれませんね。

コメントを残す

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