HTML Code

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>scrollBy() — one viewport</title>
</head>
<body>
  <h1>One viewport step</h1>
  <p>
    <button type="button" id="down">Down one screen</button>
    <button type="button" id="up">Up one screen</button>
  </p>
  <pre id="out">Ready</pre>
  <p>Page top</p>
  <p><br><br><br><br><br><br><br><br><br><br></p>
  <p><br><br><br><br><br><br><br><br><br><br></p>
  <p><br><br><br><br><br><br><br><br><br><br></p>
  <p><br><br><br><br><br><br><br><br><br><br></p>
  <p><br><br><br><br><br><br><br><br><br><br></p>
  <p><br><br><br><br><br><br><br><br><br><br></p>
  <p><br><br><br><br><br><br><br><br><br><br></p>
  <p><br><br><br><br><br><br><br><br><br><br></p>
  <p>Page bottom</p>
  <script>
    (function () {
      var out = document.getElementById("out");
      function report(label) {
        out.textContent =
          label +
          "\ninnerHeight: " + window.innerHeight +
          "\nscrollY: " + Math.round(window.scrollY || 0);
      }
      document.getElementById("down").onclick = function () {
        window.scrollBy(0, window.innerHeight);
        report("Scrolled down one viewport");
      };
      document.getElementById("up").onclick = function () {
        window.scrollBy(0, -window.innerHeight);
        report("Scrolled up one viewport");
      };
      report("Ready");
    })();
  </script>
</body>
</html>

Lines: 0 | Characters: 0

Live Preview Auto-refresh on Run

JavaScript Window scrollBy() — one viewport (Try It)