0

スクロールしたら「ページトップへ」ボタンを表示する。

ページトップ

一定の距離をスクロールした時点で、自動的に右下など任意の場所に「ページトップへ」のリンクボタンを表示し、スムーズにそのページの先頭へスクロールするjQueryを使用してみます。

 

デモサンプル

1.jQueryを読み込む

GoogleのCDNサービス | Google公式サイト 】を参考に、CDNを利用します。

 

2.HTMLを記述する

次に、「ページトップへ」ボタンを用意します。

 

3.CSSを記述

CSSにより、ページトップへのリンクボタンの表示位置と、デザインを指定します。

 aリンクに対してdisplay:blockを指定します。

 

4.JavaScriptを記述

 id名pagetopを非表示にしておき、スクロールが100pxに達したら、フェードイン表示し、そうでなければ、フェードアウトする。#pagetopをクリックしたら、bodyの先頭へ500ミリ秒でアニメーションする。という命令になります。

 

「ページトップへ」のボタンをどのタイミング(スクロール距離)で表示するのか、スクロールトップする際の速度などを数値を変更してカスタマイズ出来ます。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

mororeco > jQuery > スクロールしたら「ページトップへ」ボタンを表示する。