ウェブ

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

トップに戻るボタン

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

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

<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)を使用することで、簡単に実装することができます。また、オープンソースの「スクロールトップボタン」のプラグインやコードスニペットも利用することができます。

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

CAPTCHA


上にスクロール 下にスクロール