JavaScriptを使用したスクロールトップへの移動方法


  1. ページトップへのスムーズなスクロール: 以下のコードを使用すると、スクロールがスムーズにトップへ移動します。
function scrollToTop() {
  window.scrollTo({
    top: 0,
    behavior: "smooth"
  });
}

この関数を呼び出すためのトリガー(例: ボタンクリック)を追加することで、スクロールトップへの移動を実現できます。

  1. ページトップへの即時なスクロール: 以下のコードを使用すると、スクロールが即座にトップへ移動します。
function scrollToTop() {
  window.scrollTo(0, 0);
}

同様に、この関数をトリガーにバインドすることで、即時のスクロールトップへの移動が可能です。

  1. スクロールアニメーションの追加: スクロールトップへの移動にアニメーション効果を追加することもできます。以下のコード例では、アニメーションライブラリである「jQuery」を使用しています。
function scrollToTop() {
  $("html, body").animate({ scrollTop: 0 }, "slow");
}

この例では、jQueryを使用してHTMLとbody要素をアニメーションさせ、トップへスクロールします。

以上が、JavaScriptを使用してスクロールトップへ移動するいくつかの方法とコード例です。これらの方法を使用することで、ウェブページ上でスムーズなトップへの移動を実現できます。