HTML Code

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>scrollIntoView end</title>
  <style>
    body { font-family: sans-serif; margin: 1rem; }
    section {
      width: 300px; height: 200px; overflow-y: scroll;
      scroll-behavior: smooth;
      border: 1px solid #1e40af; border-radius: 8px; padding: 0.75rem;
    }
    #end { background: #fef08a; padding: 0.25rem; border-radius: 4px; }
    button { 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 id="end">End paragraph — scroll me into view!</p>
  </section>
  <button type="button" class="scroll-into-view">Scroll #end into view</button>
  <pre id="out">interrupted: (click button)</pre>
  <script>
    var end = document.querySelector("#end");
    document.querySelector(".scroll-into-view").addEventListener("click", async function () {
      var result = await end.scrollIntoView();
      document.getElementById("out").textContent = "interrupted: " + result.interrupted;
    });
  </script>
</body>
</html>

Lines: 0 | Characters: 0

Live Preview Auto-refresh on Run

Element.scrollIntoView — scroll #end into view (Try It)