HTML Code

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>scrollTo basic</title>
  <style>
    body { font-family: sans-serif; margin: 1rem; }
    #section { width: 280px; height: 160px; overflow-y: scroll; border: 2px solid #334155; border-radius: 8px; padding: 0.5rem; }
    .line { height: 40px; background: #e2e8f0; margin-bottom: 8px; border-radius: 4px; display: grid; place-items: center; }
    button { margin-top: 0.75rem; padding: 0.5rem 1rem; cursor: pointer; }
  </style>
</head>
<body>
  <section id="section">
    <div class="line">Line 1</div><div class="line">Line 2</div><div class="line">Line 3</div>
    <div class="line">Line 4</div><div class="line">Line 5</div><div class="line">Line 6</div>
    <div class="line">Line 7</div><div class="line">Line 8</div><div class="line">Line 9</div>
    <div class="line">Line 10</div><div class="line">Line 11</div><div class="line">Line 12</div>
    <div class="line">Line 13</div><div class="line">Line 14</div><div class="line">Line 15</div>
    <div class="line">Line 16</div><div class="line">Line 17</div><div class="line">Line 18</div>
    <div class="line">Line 19</div><div class="line">Line 20</div>
  </section>
  <button type="button" id="go">scrollTo(0, 1000)</button>
  <p id="out">scrollTop: 0</p>
  <script>
    var section = document.getElementById("section");
    var out = document.getElementById("out");
    section.addEventListener("scroll", function () { out.textContent = "scrollTop: " + section.scrollTop; });
    document.getElementById("go").addEventListener("click", function () { section.scrollTo(0, 1000); setTimeout(function () { out.textContent = "scrollTop: " + section.scrollTop; }, 50); });
  </script>
</body>
</html>

Lines: 0 | Characters: 0

Live Preview Auto-refresh on Run

Element.scrollTo — basic scrollTo(0, 1000) (Try It)