jQueryでページトップへ戻るボタンを作る方法

2019.05.14
Tips

jQueryを使ってページトップへ戻るボタンを実装する方法です。ページを少し下にスクロールすると、ボタンが右下にフェードインで表示され、クリックするとページトップまでスクロールして上がります。

HTML

<a href="#header" id="pageTop">PAGE TOP</a>

まずはボタン部分となるコードをhtmlファイルに記述します。「PAGE TOP」の文字がサイト上に表示される部分です。別のテキストや、imgタグで画像に変更できます。#headerがアンカーリンクで移動するための、サイト内の一番上に位置するコンテンツのidです。サイトに合わせて変更してください。id=”pageTop”がjQeryを実行するためのidです。

CSS

#pageTop {
 position: fixed;
 bottom: 60px;
 right: 60px;
}

次にボタンの表示位置をcssファイルに記述します。position: fixed;で常に画面上にボタンを固定表示します。今回は画面の右下各60pxの位置に固定しています。このcssでボタンのデザインも変更できます。

JavaScript

<script type="text/javascript">
jQuery(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;
 });
});
</script>

最後にhtmlファイルの<head>内にJavaScriptを記述します。

topBtn.hide();でid=”pageTop”をdisplay:noneの状態にしています。

scrollで画面が指定された高さ（100）よりスクロールされた場合に、の端を表示するように指定しています。

topBtn.clickでボタンがクリックされた際に、指定した速度（700）でスクロールするように指定しています。それぞれの数値を変更することで動きを調整できます。

うまく動かない場合は、jQueryが正しく読み込まれているか、記述に間違いがないか確認してください。