クルーデザイン

Webの勉強をしよう!Web制作の技術やサービス情報を発信します。

jQuery

jQuery ページの最上部へスクロールする処理(サンプル付き)

投稿日:

よく見かける「トップへ戻る」を作ってみます。
ホームページをいくらかスクロールしていくと、右下に出てくきて、ずっと付いてくるやつですね。
それをクリックすると、ページの最上部まで「ぎゅいーん」とスクロールします。
(たまにうっとおしく感じることがあります。)

意外と簡単に実装できますので、是非お試しください。
HTML & CSSとjQueryで実装できます。

サンプルも作っています。

 

こんな機能を作ってみます!

  1. 100px以上スクロールされると、画面右下に「トップへ」ボタンを固定表示する。
  2. スクロール量が100px未満の場合は「トップへ」ボタンを非表示にする。
  3. 「トップへ」ボタンをクリックするとページの最上部へスクロール移動する。

HTML(ページの最上部へスクロールする)

「トップへ戻る」のボタンを作ります。
最上部に「page-top」というクラスを付けておきます。
「href」で設定しているリンクは何でもOKです。
後に出てくるjQueryの処理でこのリンクはキャンセルされます。

 

CSS(ページの最上部へスクロールする)

「page-top」クラスを「position:fixed」にして右下に固定しています。
忘れがちですが「z-index」も指定して他の要素の後ろに回らないようにしておきましょう。

「a」タグは好きに装飾してもらってOKです。

 

jQuery(ページの最上部へスクロールする)

[ 2〜3行目 ]
最初は表示されていなくてもOKなので「トップへ」ボタンを非表示にしています。

[ 4〜6行目 ]
ページがスクロールされた時に実行される処理です。
「$(this).scrollTop()」で最上部からどれだけスクロールされているかの値が返ってきますので、「スクロール量が100pxを超えていたらフェードインで表示」「100px未満ならフェードアウトで非表示」にしています。

[ 7〜10行目 ]
「トップへ」ボタンがクリックされた時に実行されます。
「$(‘body,html’).animate」の部分はお決まりだと思ってください。
ブラウザによって「body」と「html」指定する要素が違うので初めから両方指定しておきましょうというやつですね。
「animate」の引数「scrollTop:0」は分かると思いますが、ページのスクロール量0の箇所、最上部を指定しています。
「500」は「500ミリ秒(0.5秒)でスクロールする」という意味です。
最後の「return false」はボタンのクリック処理を「キャンセル」しています。
これにより「aタグのリンク先に移動する」という処理がキャンセルされます。

サンプルも作ったので見てくださいね。

-jQuery

執筆者:

関連記事

jQuery ブロックレベル要素をリンクにしたい(aタグで囲まない)

インライン要素をブロックレベル要素で囲ってはいけないというHTMLの文法規約があります。 そのため、divで作ったグローバルメニューなどをaタグで囲むことができません。 ※実際は動作する場合もあります …

jQuery プラグインlazyload.js(画像の遅延読み込み)

スクロールすると画像がふわっと表示されるようなサイトを良く見ますよね。 あれは画像の遅延読み込みという事をしているそうです。 ページロード時にでは無く、スクロールで特定の位置に来た時に初めて画像を読み …

jQuery ローカルストレージ で入力値の保存と読み込みをする

ブラウザごとに値を保存しておくことができるローカルストレージについて学びたいと思います。 ブラウザの機能として提供されているものなので、特別なものは不要です。 クッキーとは少し違い、保存の有効期限など …

jQuery 文字の大きさ(フォントサイズ)の変更(小中大)

jQueryで文字サイズの大きさを変更するボタンを作ってみようと思います。 行政のサイトで良く見かけますよね。 これもjQueryで簡単に実現できます。 昔からある機能なので古いイメージがありますが、 …

jQuery アコーディオンメニューを自作サンプル(slideToggle)

クリックすれば開閉される「アコーディオンメニュー」は良く使うと思います。 プラグインも多く出ており簡単に実装することができますが、プラグインだとデザインを変更する時に苦労したりします。 プラグインから …


comment

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