JavaScriptでページのトップにスクロールする方法


以下に、シンプルで簡単な方法といくつかのコード例を示します。

  1. ボタンをクリックしてトップにスクロールする方法:

HTML:

<button onclick="scrollToTop()">トップへ</button>

JavaScript:

function scrollToTop() {
  window.scrollTo({
    top: 0,
    behavior: "smooth"
  });
}

この方法では、ボタンをクリックするとページがスムーズにトップにスクロールします。

  1. ページが自動的にトップにスクロールする方法:

JavaScript:

window.addEventListener("scroll", function() {
  if (window.pageYOffset > 0) {
    var scrollToTopButton = document.getElementById("scrollToTopButton");
    if (scrollToTopButton.style.display !== "block") {
      scrollToTopButton.style.display = "block";
    }
  } else {
    var scrollToTopButton = document.getElementById("scrollToTopButton");
    if (scrollToTopButton.style.display !== "none") {
      scrollToTopButton.style.display = "none";
    }
  }
});
function scrollToTop() {
  window.scrollTo({
    top: 0,
    behavior: "smooth"
  });
}

この方法では、ページがスクロールされるとトップにスクロールするボタンが表示されます。

以上が、JavaScriptを使用してページのトップにスクロールする方法です。これらのコード例を使用すると、ウェブページのユーザーエクスペリエンスを向上させることができます。お好みの方法を選んで実装してみてください。