【jQuery】ページトップ（上部）へ滑らかにスクロールするボタンを設置する方法～baserCMS ratio_3_2｜カスタマイズ｜新着情報｜baserCMSテーマ ratio_3

【jQuery】ページトップ（上部）へ滑らかにスクロールするボタンを設置する方法～baserCMS ratio_3_2

作成 2017-02-06　更新 2019-05-18

ページ上部にするすると戻るボタンを設置する方法

前回、jQueryを使った画像をポップアップ表示させる方法をご紹介しました。

→ 【jQuery】colorboxで画像をポップアップさせる方法

今回も jQuery を使って、ページ上部へするする戻る ボタンを設置したいと思います。

ウェブサイトでよく見かけるこれです。

仕様

１．スクロールしていない状態では表示されない。

２．ある程度スクロールするとふわっと表示される。

３．タップするとサイト上部まで滑らかに戻る。

４．上部まで戻ると消える。

１，３，４，に関してはこのページをご覧頂いている通りです。（どの端末でも同様）

２に関しましては、ページ毎に挙動を変えてあります。

TOP及び固定ページ

ふわっと表示、ふわっと消える。
→ 固定ページ（カスタマイズ方法一覧）

ブログ（news）ページ

画面下からポコッと現れて、下がりながら消えます。
→ このページの挙動です。

目的

ページの離脱率を下げるため。

より多くの情報やサービス・自身を訪問者に見て貰おうする際、より多くのページにすぐに辿り着ける様にする。ページ下部（フッター）にメニューや各項目へのリンクが無いサイトは、特に合った方が良いと思います。（個人の意見です）

ユーザビリティの向上

上記とほぼ同じ理由です。スマートフォンでは、記事が長いページを読み終えた際、上部へ戻るのに何度もスクロールさせなければなりません。戻るボタンがあれば一発で上部に戻ることが出来ます。

実践編

まずはボタン素材を用意しよう。

当サイトで使用しているボタン

はこちらから頂いております。
→ やじるし素材天国「矢印デザイン」

→ 実際のページ
この矢印デザインの大サイズをPNG形式でダウンロード。（Jpegだと周りの白い部分が入ってしまいます）

アイコンをクリックすると色と大きさが変わりますので、好みのものを右クリックから保存します。

保存した画像（btngr.png に名前を変更）を FTPソフトで画像用のフォルダ（images）にアップします。 ※アップローダーからアップしても大丈夫です。

画像のURLをメモしておきます。
http://ratio32.msstyle.jp/images/btngr.png
直接リンクは禁止します。必ずご自身のサーバー内に画像をおいて下さい。

レイアウトテンプレートに移動します。

レイアウトテンプレートに数カ所追記しますので、ソースのバックアップを必ず取ってから作業して下さい。

→ レイアウトテンプレート → default.php

追記① default.php に下記を追記します。

追加コード①

<div id="top">
<?php $this->BcBaser->header() ?>
<?php $this->BcBaser->globalMenu() ?>
</div>

１行目と４行目を追記しています。

追記② 同じくdefault.php に下記を追記します。

一番下の方です。

追加コード②

<div class="TopLink">
<a href="#top"><img src="/images/btngr.png" class="totop"></a>
</div>

img src"" の中にボタン画像のURLを入れます。（絶対パスでもOK）

これで保存します。

同様に blog.php も追記します。

→ レイアウトテンプレート → blog.php

default.php と全く同じ様に追記して保存します。

id名や class名などの細かい説明は省略しますが、この状態でサイトを更新すると、左下にボタン画像が表示されているはずです。

ボタンの表示位置を指定する

CSSでボタンの表示位置を調整しますので、CSS一覧に移動しましょう。

→ レイアウトテンプレート一覧 → CSS一覧 → custom.css

下記を追記します。

追加コード

.TopLink {
position: fixed; /*表示位置固定*/
bottom: 15px; /*下から15pxの位置*/
right: 10px; /*右から10pxの位置*/
z-index:999; /*重なり具合。一番上に表示されるように*/
}
img.totop {
width: 54px; /*大きさの指定*/
height: 54px; /*長方形等の場合は比率に応じて調整する*/
}

説明をつけましたので、あなたの使うボタン画像に合わせて調整してみて下さい。

この段階でサイトを更新すると、当サイトと同じ様に右下に表示されているはずです。表示位置が変わらない場合は、再読込するかキャッシュをクリアして下さい。クリックも出来ますが一瞬で上部に移動するはずです。この仕様で良い場合は下記は追加不要です。

いよいよ最終段階

すっと現れて滑らかに上部へ戻る仕様に

レイアウトテンプレートに直接スクリプトを書いても良いのですが、ここでは新規スクリプトファイルを読み込ませる方法でご紹介します。

Javascript 一覧に移動します。

→ レイアウトテンプレート一覧 → Javascript 一覧

custom.cssを追加する方法と同様に新規JSファイルを追加します。
→ custom.css を追加する方法

scroll.js として保存します。

scroll.js のコード

jQuery(function(){
   jQuery('a[href^=#]').click(function() {
  var speed = 800;
  var href= jQuery(this).attr("href");
  var target = jQuery(href == "#" || href == "" ? 'html' : href);
  var position = target.offset().top;
  jQuery('body,html').animate({scrollTop:position}, speed, 'swing');
  return false;
   });
});

$(function(){
    var url = jQuery(location).attr('href');
    if (url.indexOf("?id=") == -1) {
    }else{
        var url_sp = url.split("?id=");
        var hash   = '#' + url_sp[url_sp.length - 1];
        var tgt    = $(hash);
        var pos    = tgt.offset().top;
        $("html, body").animate({scrollTop:pos}, 800, "swing");
    }
});

$(function() {
    var topBtn = $('.TopLink');    
    topBtn.hide();
    $(window).scroll(function () {
        if ($(this).scrollTop() > 300) {
            topBtn.fadeIn();
        } else {
            topBtn.fadeOut();
        }
    });
    topBtn.click(function () {
        $('body,html').animate({
            scrollTop: 0
        }, 1000);
        return false;
    });
});

800がスクロールスピードで、300が出現位置になります。

scroll.js を読み込ませる

再度、レイアウトテンプレート一覧から default.php に移動します。

default.php に下記を追加します。

半角カンマを忘れないようにして下さい。似た記述があります。CSSではなくJSの方です。

この部分の実際のコード

<?php $this->BcBaser->js(array(
'https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js',
'bootstrap.min',
'jquery.colorbox-min',
'scroll'
)); ?>

上記ではcolorbox を利用した画像のポップアップ方法で jquery.colorbox-min.js を読み込んでいますが、初めてご覧になられた方は下記の記述になります。

コード

<?php $this->BcBaser->js(array(
'https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js',
'bootstrap.min',
'scroll'
)); ?>

これで保存します。

同様に blog.php も追記します。

→ レイアウトテンプレート → blog.php

default.php と全く同じ様に追記して保存します。

以上で作業終了です。

ページを更新して挙動を確認しましょう。

反映されない時は・・・

ページを更新する（PCからは F5 を押す）

スーパーリロードする（PCから Ctrl ＋ F5 を同時押し Windows）

キャッシュをクリアする

→ ブラウザのキャッシュをクリアする方法

うまく動作しない時

ボタン画像が表示されない（右下に壊れた画像の表示がある）

→ 画像のパスが原因です。画像までの絶対パス（URL）をいれましょう。

→ ページにスクロールの必要がない時。スクリプトに300と設定している箇所があります。この数字を変えることで表示のタイミングが変わります。

するするスクロールしない・ボタンが表示されたまま

→ scroll.js ファイルをうまく読み込めてません。スペルの間違いがないか確認しましょう。

挙動をこのページと同じ様にしたい場合

当サイトではページ毎に挙動を変えているとお伝えしました。このページと同じ挙動にしたい場合は scroll.js を書き換えて下さい。

ポコッと現れて下にすっと消えるボタン

jQuery(function(){
   jQuery('a[href^=#]').click(function() {
  var speed = 800;
  var href= jQuery(this).attr("href");
  var target = jQuery(href == "#" || href == "" ? 'html' : href);
  var position = target.offset().top;
  jQuery('body,html').animate({scrollTop:position}, speed, 'swing');
  return false;
   });
});

$(function(){
    var url = jQuery(location).attr('href');
    if (url.indexOf("?id=") == -1) {
    }else{
        var url_sp = url.split("?id=");
        var hash   = '#' + url_sp[url_sp.length - 1];
        var tgt    = $(hash);
        var pos    = tgt.offset().top;
        $("html, body").animate({scrollTop:pos}, 800, "swing");
    }
});

$(function() {
    var showFlag = false;
    var topBtn = $('.TopLink');    
    topBtn.css('bottom', '-100px');
    var showFlag = false;
    //スクロールが400に達したらボタン表示
    $(window).scroll(function () {
        if ($(this).scrollTop() > 400) {
            if (showFlag == false) {

                showFlag = true;
                topBtn.stop().animate({'bottom' : '20px'}, 200); 
            }
        } else {
            if (showFlag) {
                showFlag = false;
                topBtn.stop().animate({'bottom' : '-100px'}, 200); 
            }
        }
    });
    topBtn.click(function () {
        $('body,html').animate({
            scrollTop: 0
        }, 1000);
        return false;
    });
});

こちらの方は400でボタンが表示される様にしております。

参考ページ

→ jQueryでスクロールすると表示する系いろいろ

当サイトのからくり

default.php にscroll.js を読み込ませて、blog.php にscroll2.js を読み込ませています。単純です^^;

最後に・・・

今回は作業箇所が多かったですが、うまく出来たでしょうか。今回ご紹介したボタンサイズだと、スマホやタブレットからも良い感じになるのでは・・・と思います^^;

あなたの使うボタンによって異なりますので、CSSで位置やサイズを調整してみて下さい。特にスマートフォンで見た時の大きさや位置を優先されることをオススメいたします。

お役に立てましたら、いいね！＆シェアして頂けると幸いです。
ご覧頂きありがとうございます。

新着情報