ある程度スクロールされた時点で、何かを表示する方法

ある程度スクロールされたときにだけ、「TOPへ戻る」ボタンが表示される

ある程度スクロールされたときにだけ、「TOPへ戻る」ボタンが表示される

ウェブページを最初に表示した時点では見えていないのに、ページをある程度スクロールすると、ウインドウの右下あたりに「TOPへ戻る」のような操作ボタンが固定表示される……というサイトを見たことはないでしょうか?

縦に長いページで、(ページの最上部に目次があるなど)頻繁に上部を参照する必要のあるページなどでは、このように手軽に上部へ戻るボタンがあると便利でしょう。

そこで今回は、ユーザのスクロール量に応じて「TOPへ戻る」ボタンを動的に表示する方法を解説致します。この方法で表示できるのは「TOPへ戻る」などのボタンには限りません。例えば、「関連情報リスト」のボックスなど、何でも好きなものを表示できます。

スクロール量を把握して何らかの処理をするのは、jQueryを使えば簡単

必要な情報と処理

必要な情報と処理

スクロール量に応じてボタンを表示させるために必要な方法は、以下の2点です。
  • 「現在表示されている位置が、ページ上部から何ピクセルほどスクロールされた位置なのか?」という情報を得る方法
  • 「条件が満たされたときにだけ、指定のボックスを表示させる」という方法
どちらも、JavaScriptの有名ライブラリである「jQuery」を使うと、とても簡単に短い記述で実現できます。

詳しい記述方法は後述しますが、例えば、
$(window).scrollTop();
という記述だけで、「ページの先頭から何ピクセルほどスクロールされたのか」という情報を取得できます。これを活用すれば、「指定ピクセルほどスクロールしたときに指定のボックスを表示する」といったスクリプトが簡単に作れます。このような「閲覧者のスクロール量を得る」方法が使えると、スクリプトの応用範囲が広がり、とても役に立ちます。

ある程度スクロールされたら「TOPへ戻る」ボタンを表示するサンプル

ある程度スクロールすると「TOPへ戻る」ボタンが表示される

ある程度スクロールすると「TOPへ戻る」ボタンが表示される

本記事で解説するためのサンプルページを用意していますので、以下のリンク先にブラウザでアクセスしてみて下さい。

スクロール量に応じて「TOPへ戻る」ボタンを表示する例

上記のページで下方向に350px以上スクロールすると、右図のようにページの右下に「▲TOPへ戻る」という半透明のボタンが現れます。逆に350px以内に戻ると、ボタンは消えます。ブラウザのスクロールバーを操作して、ボタンの表示・非表示を試してみて下さい。

今回は、このようなページの作り方を解説致します。

それでは次のページから、jQueryを使って「ある程度スクロールされたらボタンが表示される」機能の作り方を見ていきましょう。