スクロールすると出てくる「トップへ戻る」ボタンの作り方

最近のホームページはページをスクロールすると右下にページトップに戻るボタンが出てくるのが当たり前になっていますよね。ここでは、このボタンの作り方について見ていきたいと思います。「ページトップに戻る」ボタンを作るには、HTMLとCSSでボタンを作る工程と、jQueryを使って動きを実装させる工程の２つがあります。それでは順番に見ていきましょう。

コンテンツ [hide]

ページトップへ戻るボタンの作成

最初に、ボタンの作成から見ていきましょう。ボタンは、右下に固定されるようにposition: fixed;で設定します。いくつかボタンをデザインしてみましたので、下記の中から気に入ったものをコピペしてご利用ください。色とかサイズとか細かい調整はいろいろ工夫してみてくださいね。

ちなみに、下記ではアイコンフォントとして「Font Awesome」というサービスを利用しています。これらのアイコンを使用するためには、head要素の中に下記のコードを入れる必要があります。

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.4/css/all.css">

「Font Awesome」の詳細については下記をご参照ください。

2017.09.03

Font Awesome 5｜いろんなアイコンが使えるWEBアイコンフォント

「フォント」というと文字の種類を指すものというイメージがありますが文字だけでなくアイコンの形をしたフォントというのがあるのをご存知ですか？実は、みなさんも何気なく目にしているものだったりします。例えば、こういうものです。これ全部、フォン...

「トップへ戻る」ボタンのデザイン15パターン

ボタンで表示を切り替えてご覧ください。

上記のボタンは、設置するだけでも機能はしてくれるのですが、せっかく作るならページを少しスクロールすると出てきて、ボタンをクリックすると、スーッとトップへ戻りボタンがスッと消えるようにしたいじゃないですか。それを実装するためにjQueryを使います。

上記のボタンたちはすべて「page_top」というid名が付けられています。このid名に対してjQueryで関数を設定するのですが、その下準備として、head要素内でjQueryを読み込ませる必要があります。WordPressの場合はjQueryが最初から読み込まれていますが、必要な場合は下記のコードを<head>～</head>にコピペしてください。

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

jQueryでボタンの動きを設定

ここでは３つのパターンとjQueryのコードをご紹介します。実際にスクロールして動きも確認してみてください。

ボタンで表示を切り替えてご覧ください。

下から出てくるボタン

jQuery(function() {
  var appear = false;
  var pagetop = $('#page_top');
  $(window).scroll(function () {
    if ($(this).scrollTop() > 100) {  //100pxスクロールしたら
      if (appear == false) {
        appear = true;
        pagetop.stop().animate({
          'bottom': '50px' //下から50pxの位置に
        }, 300); //0.3秒かけて現れる
      }
    } else {
      if (appear) {
        appear = false;
        pagetop.stop().animate({
          'bottom': '-50px' //下から-50pxの位置に
        }, 300); //0.3秒かけて隠れる
      }
    }
  });
  pagetop.click(function () {
    $('body, html').animate({ scrollTop: 0 }, 500); //0.5秒かけてトップへ戻る
    return false;
  });
});

横から出てくるボタン

jQuery(function() {
  var appear = false;
  var pagetop = $('#page_top');
  $(window).scroll(function () {
    if ($(this).scrollTop() > 100) {  //100pxスクロールしたら
      if (appear == false) {
        appear = true;
        pagetop.stop().animate({
          'right': '0px' //右から0pxの位置に
        }, 300); //0.3秒かけて現れる
      }
    } else {
      if (appear) {
        appear = false;
        pagetop.stop().animate({
          'right': '-50px' //右から-50pxの位置に
        }, 300); //0.3秒かけて隠れる
      }
    }
  });
  pagetop.click(function () {
    $('body, html').animate({ scrollTop: 0 }, 500); //0.5秒かけてトップへ戻る
    return false;
  });
});

フェイドして現れるボタン

jQuery(function() {
    var pagetop = $('#page_top');    
    pagetop.hide();
    $(window).scroll(function () {
        if ($(this).scrollTop() > 100) {  //100pxスクロールしたら表示
            pagetop.fadeIn();
        } else {
            pagetop.fadeOut();
        }
    });
    pagetop.click(function () {
        $('body,html').animate({
            scrollTop: 0
        }, 500); //0.5秒かけてトップへ移動
        return false;
    });
});

それぞれの細かい調整はソースコードにコメントしてありますので、自分のページに合うように調整してみてくださいね。

ところで、下記のようにトップへ戻るボタンだけでなく、ページ内リンクもスムーズに移動させたいと思いませんか？（「クリック」の部分をクリックしてみてください）

そういう場合は、下記のようにソースコードをしてみてください。↓これはボタンがフェードするバージョンです。

jQuery(function() {
    var pagetop = $('#page_top');    
    pagetop.hide();
    $(window).scroll(function () {
        if ($(this).scrollTop() > 100) {  //100pxスクロールしたら表示
            pagetop.fadeIn();
        } else {
            pagetop.fadeOut();
        }
    });
  $('a[href^="#"]').click(function(){
    var time = 500;
    var href= $(this).attr("href");
    var target = $(href == "#" ? 'html' : href);
    var distance = target.offset().top;
    $("html, body").animate({scrollTop:distance}, time, "swing");
    return false;
  });
});

変更点としては、下記の部分を入れ替えます。

変更前

pagetop.click(function () {
    $('body,html').animate({
        scrollTop: 0
    }, 500); //0.5秒かけてトップへ移動
    return false;
});

変更後

$('a[href^="#"]').click(function(){
  var time = 500;
  var href= $(this).attr("href");
  var target = $(href == "#" ? 'html' : href);
  var distance = target.offset().top;
  $("html, body").animate({scrollTop:distance}, time, "swing");
  return false;
});

ページ内リンクをスムーズにする仕組みついてご興味がある方は、下記の記事で詳しくお話していますので、良かったら参考にしてみてください。

2018.08.02

jQuery｜ページ内リンクをスムーズにスクロールさせる方法

ページ内のリンクをクリックしたときに、カチってページが切り替わるのってちょっとスマートじゃないですよね。ここでは、ページ内リンクをクリックしたときに、スーッとスクロールさせる方法をjQueryを使って実装していきます。ページ内リンクをスムーズにスクロー...

以上がスクロールすると出てくる「トップへ戻る」ボタンの作り方でした。

2018.09.03

スクロールすると途中から上部に固定されるメニューの作り方

ここでは、jQueryを使ってページをスクロールすると途中から上部に固定されるグローバルメニューを作っていきます。スクロールすると途中から上部に固定されるメニューはじめに完成したサンプルをご覧ください。 See the Pen scr...

WordPressとデザインが学べるWebメディア