スクロールすると下から出てくる「トップに戻るボタン」をコピペで実装可能【jQueryで作る方法】

Webサイトの一番上にいる場合は「トップに戻るボタン」が隠れている状態ですが、下にスクロールすると、下から出てくるように設定。

コピーペーストで簡単実装できるようにコードを記述しています。

<head>内にjQueryのライブラリを追加
＜footer＞内にトップに戻るボタン追加
- HTML
- CSS
- JS
CodePen
「トップに戻るボタン」について

<head>内にjQueryのライブラリを追加

jQueryをCDN経由で読み込むためにhead内に下記のコードを貼り付けます。

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

＜footer＞内にトップに戻るボタン追加

footerの直下にid名page_topのコードを記述。

HTML

<footer>
	<p id="page_top"><a href="#">TOP</a></p>
</footer>

CSS

/*------------------------------------
topに戻るボタン
------------------------------------*/
#page_top {
  position: fixed;
  transform: translateY(100px);
}
#page_top a {
  display: flex;
  justify-content: center;
  align-items: center;
  background: #3b5d82;
  border-radius: 50%;
  color: #fff;
  text-decoration: none;
  transition: all 0.3s;
}
#page_top.upmove {
  animation: UpAnime 0.5s forwards;
}
@keyframes UpAnime {
  from {
    opacity: 0;
    transform: translateY(100px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
#page_top.downmove {
  animation: DownAnime 0.5s forwards;
}
@keyframes DownAnime {
  from {
    opacity: 1;
    transform: translateY(0);
  }
  to {
    opacity: 1;
    transform: translateY(100px);
  }
}
/* @media (min-width: 1000px) {} 1000px以上で適用 */
@media (min-width: 1000px) {
  /*  ボタン配置  */
  #page_top {
    right: 24px; 
    bottom: 0;
  }
  #page_top a {
    width: 80px;
    height: 80px;
  }
}
/* @media (max-width: 999px) {} 999px以下で適用 */
@media (max-width: 999px) {
  #page_top {
    right: 12px;
    bottom: 0;
  }
  #page_top a {
    width: 50px;
    height: 50px;
    font-size: 0.6rem;
  }
}

JS

//topに戻るボタン
function topanime() {
  var scroll = $(window).scrollTop();
  //300pxスクロールしたらpage_topが出てくる
  if (scroll >= 300) {
    $("#page_top").removeClass("downmove"); //初期クラス名
    $("#page_top").addClass("upmove"); //クラス名追加
  } else {
    if ($("#page_top").hasClass("upmove")) { //classが存在するかを確認
      $("#page_top").removeClass("upmove"); //pagetopの場合はクラス名削除
      $("#page_top").addClass("downmove"); //pagetopの場合はクラス名追加
    }
  }
}
$(window).scroll(function () {
  topanime();
});
$(window).on("load", function () {
  topanime();
});
$("#page_top a").click(function () {
  $("body,html").animate(
    {
      scrollTop: 0,
    },
   500 //スクロールスピード
  );
  return false;
});

コードは、ページのスクロール位置に応じて「トップに戻るボタン」を表示/非表示にし、ボタンをクリックするとスムーズにページのトップにスクロールする機能を実現しています。

topanime() 関数	ページのスクロール位置を監視し、ボタンの表示/非表示を切り替える関数です。 $(window).scrollTop() は、現在のスクロール位置を取得。 if 文を使用して、スクロール位置が300px以上であれば「トップに戻るボタン」を表示するためのクラス名を追加。 else 文では、スクロール位置が300px未満であればボタンを非表示にするためのクラス名を追加。
$(window).scroll() イベント	ページのスクロールイベントを監視し、topanime() 関数を呼び出します。これにより、スクロール時にボタンの表示/非表示が動的に切り替る。
$(window).on(“load”) イベント	ページの読み込み完了時に topanime() 関数を呼び出します。これにより、ページが読み込まれた瞬間にボタンの表示/非表示が正しく設定。
$(“#page_top a”).click() イベント	「トップに戻るボタン」がクリックされた時の処理を定義します。 $(“body,html”).animate() は、スムーズなスクロールを実現するためにページの上部にアニメーションでスクロール。 scrollTop: 0 は、スクロール位置をページの上部に設定。 500 は、スクロールのスピードをミリ秒単位で指定。

スクロール機能

コードを実行することで、ページのスクロール位置に応じて「トップに戻るボタン」が表示され、ボタンをクリックするとスムーズにページのトップにスクロールすることができます。

CodePen

➡ CodePenはこちら

See the Pen トップに戻るボタン by pull-design (@design90806871) on CodePen.

「トップに戻るボタン」について

ウェブページの下部に配置され、ユーザーが長いページをスクロールした際に画面の上部に簡単に戻るためのボタンです。このボタンは一般的に以下のような特徴を持ちます。

表示のトリガー	ページをスクロールして一定の位置に到達すると、ボタンが自動的に表示されます。一般的には画面下部に位置します。
アイコンやテキスト	ボタンは通常、矢印や上向きの三角形のアイコン、または「トップに戻る」といったテキストが表示されます。
スムーズなスクロール	ボタンをクリックすると、スムーズなアニメーションで画面の上部にスクロールします。これにより、ユーザーは瞬時にトップに戻ることができます。

特徴

「トップに戻るボタン」は、ユーザーエクスペリエンスの向上やユーザビリティの向上のために使用されます。長いページやコンテンツが多いウェブサイトでは、ユーザーがスクロールしてページの上部に戻るために手動でスクロールする必要がなくなり、よりスムーズなナビゲーションが可能となります。

このボタンを実装するには、通常はHTML、CSS、JavaScriptを使用します。CSSでボタンのデザインや位置を設定し、JavaScriptを使用してスクロールイベントを監視し、ボタンの表示/非表示を切り替えるとともに、クリック時のスムーズなスクロールを実現します。

ボタンの具体的な実装方法は、ウェブサイトの要件や使用するフレームワークやライブラリによって異なります。一般的には、JavaScriptのライブラリやフレームワーク（例: jQuery、React、Vue.js）を使用することで、簡単に実装することができます。また、オープンソースの「スクロールトップボタン」のプラグインやコードスニペットも利用することができます。