JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

【jQuery入門】クリック1つでページ最上部へスムーズにスクロールする方法

jQueryでページの最上部へスムーズにスクロールする方法

長いWebページでは、ページ下部からワンクリックで最上部に戻れる「ページトップへ戻る」リンクがあると、ユーザビリティが大きく向上します。本記事では、jQueryのanimate()メソッドとscrollTopプロパティを組み合わせて、滑らかなスクロールアップを実装する手順を解説します。

実装のポイント

  • scrollTop: 0 … 縦方向のスクロール位置を0（ページ最上部）に設定します。
  • animate({ scrollTop: 0 }, "slow") … アニメーション付きでスクロールします。"slow" のほか、"fast" やミリ秒の数値（例：500）も指定でき、動きの速さを調整できます。
  • return false; … リンクのデフォルト動作（#へのジャンプによるURL変化など）を無効化し、意図しない挙動を防ぎます。

コード例

ページ下部の「Scroll up」リンクをクリックすると、ページの先頭へゆっくりとスクロールして戻るサンプルです。実際のサイトでは本文が長くなるため、ここではテキストを簡略化しています。

<html>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$("a").click(function() {
  $("html, body").animate({ scrollTop: 0 }, "slow");
  return false;
});
</script>
<h3>TOP OF PAGE</h3>
<p>
  これはデモ用のテキストです。<br>
  （※実際には、ここにページを長くするためのコンテンツが多数入ります）<br>
  これはデモ用のテキスト。
</p>
<h3>BOTTOM OF PAGE</h3>
<a href="#">Scroll up（ページ上部へ戻る）</a>
</body>
</html>

なお、jQueryを読み込んでいない環境では $ 関数が使えないため、上記のようにCDN経由でjQueryライブラリを先に読み込んでおく必要があります。

補足：ネイティブJavaScriptで実装する場合

jQueryに依存せず、素のJavaScriptだけでも同じ動作を実現できます。window.scrollTo() に behavior: "smooth" を指定すれば、主要ブラウザでスムーススクロールが有効になります。

document.querySelector("a").addEventListener("click", function(e) {
  e.preventDefault();
  window.scrollTo({ top: 0, behavior: "smooth" });
});

プロジェクトの環境や方針に応じて、jQuery版とネイティブJavaScript版を使い分けるとよいでしょう。

  1. JavaScriptで現在の年だけを表示する方法【getFullYear()の使い方】

    Webサイトのコピーライト表記などで「現在の年」だけを動的に表示したいケースはよくあります。JavaScriptでは、DateオブジェクトのgetFullYear()メソッドを使うことで、現在の年（西暦4桁）を簡単に取得できます。 getFullYear()メソッドとは getFullYear()は、日時から「年」の部分だけを4桁の数値として返すメソッドです。getYear()という類似のメソッドもありますが、こちらは1900年からの経過年数を返す古い仕様のため、現在では非推奨となっています。必ずgetFullYear()を使用しましょう。 サンプルコード 以下は、現在の年を画面に表示する完全

  2. Androidでページの最上部・最下部へ一瞬でジャンプする方法【rootアプリ&ブラウザ別テクニック】

    長いページのスクロールが面倒な問題 ウェブサイトで本当に見たいコンテンツにたどり着くまで、何度も何度もスクロールしなければならないとき、誰もがイライラした経験があるはずです。ページの上部で見つけた情報をもう一度確認したいのに、今はページの最下部にいて、指を何度も動かして戻らなければならない——そんな場面は珍しくありません。急いでいるときには、この作業がさらに苦痛になります。こうした場合、どうすればよいのでしょうか。 幸い、「OneClick Scroll」というAndroidアプリを使えば、端末上のあらゆるページの最上部や最下部へワンタップでジャンプできます。ここではその使い方を詳しく解説し