【jQuery】ページトップへ戻るボタンを実装する方法
WEBサイトでよく見かけるページトップへ戻るボタン。ユーザーにとっても便利なボタンですね。
このページではページトップへ戻るボタンを実装する方法と、最初はボタンを非表示にし、スクロールが一定数に達すると表示させる方法をご紹介いたします。
1. ページトップへ戻る(スムーススクロール)
完成形デモ
See the Pen ページトップへ戻る(スムーススクロール) by crnote (@crnote) on CodePen.
CSS
ボタンの装飾
cssではボタンの装飾と、ボタンの位置を右下に固定します。
- .topbtn {
- /*ボタンの装飾*/
- width: 65px;
- height: 65px;
- line-height: 65px;
- background-color: #928484;
- border-radius: 50%;
- text-align: center;
- /*位置を固定*/
- position: fixed;
- bottom: 20px;
- right: 20px;
- }
- .topbtn a {
- text-decoration: none;
- color: #fff;
- }
jQuery
スムーススクロール
jQueryでスムーススクロールを実装します。
「#」で始まるリンクをクリックした時に実行されます。
animateの数字はスクロールの速度(ミリ秒)を指定します。
- $(function(){
- //#で始まるリンクをクリックしたときに実行
- $("a[href*='#']:not([href='#'])").click(function(){
- //移動先を取得
- var target=$($(this).attr("href")).offset().top;
- target-=0
- //数値はスクロールの速度(ミリ秒)
- $("html,body").animate({scrollTop:target},500);
- return false;
- });
- });
2. スクロールが一定数に達するとページトップへ戻るボタンを表示
完成形デモ
See the Pen スクロールするとページトップへ戻るボタンを表示 by crnote (@crnote) on CodePen.
CSS
ボタンの装飾
cssでは上記と同じくボタンの装飾と、ボタンの位置を右下に固定します。
jQuery
スクロールが一定数に達したらボタンを表示
jQueryでは上記と同じスムーススクロールの記述に、スクロールが一定数に達したらボタンを表示させる記述を追加します。
「topBtn.hide」で最初はボタンを非表示にしておきます。
scrollTopの数値には、トップからスクロールした箇所までのpx数を指定し、その数値までスクロールが達したらボタンが表示されます。
今回の例の場合は、トップから250pxスクロールしたら、ボタンが表示される設定になっています。
- //.topbtnを非表示
- var topBtn = $('.topbtn');
- topBtn.hide();
- //スクロールが250に達したらボタンをフェードイン
- $(window).scroll(function () {
- if ($(this).scrollTop() > 250) {
- topBtn.fadeIn();
- } else {
- topBtn.fadeOut();
- }
- });
まとめ
今回ご紹介したjQueryはページトップに戻るボタン以外にも、固定のお問い合わせボタンなどにも使用できるので、使い方をマスターしておくと便利です!