HTML Code

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>scrollTo top</title>
  <style>
    body { font-family: sans-serif; margin: 1rem; }
    section { width: 300px; height: 180px; overflow-y: scroll; scroll-behavior: smooth; border: 1px solid #1e40af; border-radius: 8px; padding: 0.75rem; }
    .scroll-to { margin-top: 0.75rem; padding: 0.5rem 1rem; cursor: pointer; }
    pre { margin-top: 0.75rem; background: #f1f5f9; padding: 0.5rem; border-radius: 4px; }
  </style>
</head>
<body>
  <section>
    <p>Paragraph 1</p><p>Paragraph 2</p><p>Paragraph 3</p><p>Paragraph 4</p>
    <p>Paragraph 5</p><p>Paragraph 6</p><p>Paragraph 7</p><p>Paragraph 8</p>
    <p>Paragraph 9</p><p>Paragraph 10</p>
  </section>
  <button type="button" class="scroll-to">scrollTo() top</button>
  <pre id="out">interrupted: (click button)</pre>
  <script>
    var section = document.querySelector("section");
    document.querySelector(".scroll-to").addEventListener("click", async function () {
      var result = await section.scrollTo(0, 0);
      document.getElementById("out").textContent = "interrupted: " + result.interrupted + " | scrollTop: " + section.scrollTop;
    });
    section.scrollTop = section.scrollHeight;
  </script>
</body>
</html>

Lines: 0 | Characters: 0

Live Preview Auto-refresh on Run

Element.scrollTo — scrollTo(0, 0) top (Try It)