jQueryでつくるページトップへ戻るボタン

2015.02.22
Tips

多くのサイトでページのトップまで戻るためのボタンが実装されているのを見かけます。ブログサイトのようにページが縦い長くなるサイトでは、とても便利な機能だと思います。

WordPressのプラグインにも、ページトップへ戻るための機能を追加するものはたくさんありますが、今回は「jQuery」を使って実装する方法をメモしておきます。ページを少し下にスクロールすると、「Page Top」のボタンが右下に表示され、クリックするとページトップまでスクロールして上がるようします。

まずは、ページトップへ戻るボタンとして使用するリンクを作成します。例では「Page Top」のテキストをボタン風にするcssを設定します。

<a href="#wrapper" id="pageTop" style="display: block;">Page Top</a>

テキストの代わりに画像を使用することもできます。リンク先は、ページ全体を囲うdivのidを指定しました。コピーして使用する際は「#wrapper」の部分をサイトに合わせて変更してください。

次にリンクをボタン風に表示するためのcssを設定します。

/* ----- .pagetop ----- */
#pageTop {
  background:#a22041;
  border-radius:5px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  color:#FFF;
  padding:16px 20px;
  position:fixed;
  bottom:30px;
  right:30px;
}
#pageTop:hover{
  text-decoration:none;
  opacity: 0.6;
  -moz-opacity:0.6;
  zoom:1;
}

角を丸くして、マウスオーバーすると半透明になるようにしました。bottomrightでボタンを表示する位置を指定しています。画像を使用する場合は、position:fixedと、画像の表示位置だけ設定しください。

#pageTop:hoverでマウスオーバー時にボタンを半透明にする指定をしています。

最後に、jQueryを作成します。作成したjQueryはheader内などで読み込んでください。

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

既定位置まで下にスクロールした際に、「Page Top」のボタンを表示する設定と、ページのトップへ戻る際の速さなどを設定しました。$(this).scrollTop() > 100で画面がスクロールされ、ボタンが表示される位置を指定しています。$('body,html').animateの700の値は、ページトップに戻る際のスクロールの速さの指定です。数値はサイトに合わせて調整してみてください。

以前は、「ページトップへ戻る」のボタンをアンカーリンクで代用していましたが、ページの最下部にしかなかったり、長いページには一定の間隔で複数個作成する必要がありました。
jQueryを使用することでそのような点も改善できたかと思います。

参考

たったの10秒でできる！jQueryで実装する「ページトップへ戻るボタン」｜Kowappa
jQuery：スクロールで表示されるページトップの実装方法｜Nx World