一定の距離をスクロールした時点で、自動的に右下など任意の場所に「ページトップへ」のリンクボタンを表示し、スムーズにそのページの先頭へスクロールするjQueryを使用してみます。
1.jQueryを読み込む
【 GoogleのCDNサービス | Google公式サイト 】を参考に、CDNを利用します。
|
1 |
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> |
2.HTMLを記述する
次に、「ページトップへ」ボタンを用意します。
|
1 |
<p id="pageTop"><a href="#top">ページトップへ</a></p> //任意のid名を指定します。 |
3.CSSを記述
CSSにより、ページトップへのリンクボタンの表示位置と、デザインを指定します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
#pageTop { position: fixed; //下から50pxに配置 bottom: 50px; //右から10pxに配置 right: 10px; font-size: 80%; } #pageTop a { background: #77A636; text-decoration: none; color: #fff; padding: 20px; text-align: center; display: block; //block要素にする -webkit-border-radius: 5px; border-radius: 5px; } #pageTop a:hover { text-decoration: none; background: #fa4f7c; } |
aリンクに対してdisplay:blockを指定します。
4.JavaScriptを記述
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
$(function() { var topBtn = $('#pageTop'); topBtn.hide(); //スクロールが100に達したらボタン表示 $(window).scroll(function () { if ($(this).scrollTop() > 100) { topBtn.fadeIn(); } else { topBtn.fadeOut(); } }); //スクロールしてトップ topBtn.click(function () { $('body,html').animate({ scrollTop: 0 }, 500); return false; }); }); |
id名pagetopを非表示にしておき、スクロールが100pxに達したら、フェードイン表示し、そうでなければ、フェードアウトする。#pagetopをクリックしたら、bodyの先頭へ500ミリ秒でアニメーションする。という命令になります。
「ページトップへ」のボタンをどのタイミング（スクロール距離）で表示するのか、スクロールトップする際の速度などを数値を変更してカスタマイズ出来ます。