CREARC

Designer's Blog

0

このサイトでも実装しているのですが、ある程度下にスクロールすると右下からふわっと出てくる、「TOPへ戻る↑」のボタン。実装するのはそんなに難しくはありません。きちんとステップを踏めば意外と誰でも実装できます。コピペで実装できるようにコードも公開してます。実際に設置してみたので、設置方法をここで紹介していきたいと思います。TOPへ戻るボタンをサイトに付けたいけど悩んでいる方は是非参考にしてみてください。

1.Google jQueryの追加

まずはじめにGoogleが用意したjQueryを読み込みます。これをサイトの<head></head>の中に以下のコードを追加します。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

2.jQueryの追加

こちらも同じくサイトの<head></head>の中に以下のコードを追加します。

<script type="text/javascript">
$(function() {
    var pageTop = $('.page-top');
    pageTop.hide();
    $(window).scroll(function () {
        if ($(this).scrollTop() > 600) {
            pageTop.fadeIn();
        } else {
            pageTop.fadeOut();
        }
    });
    pageTop.click(function () {
        $('body, html').animate({scrollTop:0}, 500, 'swing');
        return false;
    });
});
</script>

7行目の部分の「600」ですが、この数字は600px下にスクロールしたら、「TOPへ戻る↑」のボタンが出現するようになってます。自分のサイトに合わせてここの数字をうまく調整してみてください。14行目の部分の「500」という数字は上部に戻るスピードになります。もし瞬時にTOPまで戻したい場合は10などの数字を入れるといいです。もしゆっくりと戻したい場合は900という数字を入力しておくとゆっくりと上にスクロールして戻ります。ここも自分のサイトに合わせた設定を入れてみるといいと思います。

3.HTMLでボタンを配置

「TOPへ戻る↑」ボタンのコードになります。CSSで位置を固定しますので、表示したいところであればどこに設置しておいても問題ありません。サイト全体に付けて起きたいのであればサイトのフッター部分などに入れておくといいでしょう。上矢印部分はこのサイトでも各所で利用しているFont Awesomeを利用して設置しております。

<a href="#" class="page-top">TOPへ戻る<i class="fa fa-arrow-circle-up" aria-hidden="true"></i></a>

4.CSSで出現場所やボタンの色を変更

CSSでボタンの位置や装飾を設定します。

position: fixed;絶対位置(ボタンの出現位置固定)
bottom: 20px;下から20pxに配置
right: 20px;右から20pxに配置

background:でボタンの背景の色へ変更したり、border-radius:角を丸くしたり、opacity:で半透明にしたりすると、カッコイイです。(下記は当サイトのTOPへ戻るボタンと同じCSSです)

.page-top {
    position: fixed;
    bottom: 20px;
    right: 20px;
    padding: 11px;
    background: #1fbba6;
    border-radius: 3px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    font-size: 12px;
    -ms-filter: "alpha(opacity=80)";
    -moz-opacity: 0.8;
    -khtml-opacity: 0.8;
    opacity: 0.8;
   color:#ffffff;
    text-decoration:none;
}

以上で設置が完了します。是非チャレンジしてみてください。



コメントはこちら

TOPへ戻る