クルーデザイン

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

執筆者:

関連記事

CSS Animate.css の基本サンプル(通常・クリックされた・マウスオーバー)

テキストだけのサイトだと「さびしい」「少しだけ動きが欲しい」という場合には「Animate.css」が便利です。 Animate.cssは、あらかじめ定義されているクラスを追加するだけで要素にアニメー …

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

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

jQuery 絞り込み検索サンプル(正規表現)

jQueryを利用すれば、絞り込み検索機能も簡単に作成できます。 絞り込み検索機能とは、テキストボックスに入力した値とマッチするものを表示・マッチしないものを非表示にするような機能です。 以下のような …

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

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

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

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


comment

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