How to check if scroll has reached half page using JavaScript

A simple scenario. Let us assume, I want to run a JS code or call a function (like making an Ajax call) only when I have scrolled half way down the page. I can do this using a simple JavaScript method.

The Markup

I have a long web page.

<!DOCTYPE html>
<html>

<body>
  <p>
    We have come across many examples, where the total values shown at the bottom are the sum of the values of the active page. That is, page 1 will show running total of the 1st page; page 2 will display the total of 2nd page etc.Using ViewState [""], we can add and display a "Grand Total" either on every page’s footer or the last page itself. This may or may be the best solution, but it works without any issues.
  </p>
  <p>
    We have come across many examples, where the total values shown at the bottom are the sum of the values of the active page. That is, page 1 will show running total of the 1st page; page 2 will display the total of 2nd page etc.Using ViewState [""], we can add and display a "Grand Total" either on every page’s footer or the last page itself. This may or may be the best solution, but it works without any issues.
  </p>
  <p>
    We have come across many examples, where the total values shown at the bottom are the sum of the values of the active page. That is, page 1 will show running total of the 1st page; page 2 will display the total of 2nd page etc.Using ViewState [""], we can add and display a "Grand Total" either on every page’s footer or the last page itself. This may or may be the best solution, but it works without any issues.
  </p>
  <p>
    We have come across many examples, where the total values shown at the bottom are the sum of the values of the active page. That is, page 1 will show running total of the 1st page; page 2 will display the total of 2nd page etc.Using ViewState [""], we can add and display a "Grand Total" either on every page’s footer or the last page itself. This may or may be the best solution, but it works without any issues.
  </p>
  <p>
    We have come across many examples, where the total values shown at the bottom are the sum of the values of the active page. That is, page 1 will show running total of the 1st page; page 2 will display the total of 2nd page etc.Using ViewState [""], we can add and display a "Grand Total" either on every page’s footer or the last page itself. This may or may be the best solution, but it works without any issues.
  </p>
  <p>
    We have come across many examples, where the total values shown at the bottom are the sum of the values of the active page. That is, page 1 will show running total of the 1st page; page 2 will display the total of 2nd page etc.Using ViewState [""], we can add and display a "Grand Total" either on every page’s footer or the last page itself. This may or may be the best solution, but it works without any issues.
  </p>
  <p>
    We have come across many examples, where the total values shown at the bottom are the sum of the values of the active page. That is, page 1 will show running total of the 1st page; page 2 will display the total of 2nd page etc.Using ViewState [""], we can add and display a "Grand Total" either on every page’s footer or the last page itself. This may or may be the best solution, but it works without any issues.
  </p>
  <p>
    We have come across many examples, where the total values shown at the bottom are the sum of the values of the active page. That is, page 1 will show running total of the 1st page; page 2 will display the total of 2nd page etc.Using ViewState [""], we can add and display a "Grand Total" either on every page’s footer or the last page itself. This may or may be the best solution, but it works without any issues.
  </p>
  <p>
    We have come across many examples, where the total values shown at the bottom are the sum of the values of the active page. That is, page 1 will show running total of the 1st page; page 2 will display the total of 2nd page etc.Using ViewState [""], we can add and display a "Grand Total" either on every page’s footer or the last page itself. This may or may be the best solution, but it works without any issues.
  </p>
  <p>
    We have come across many examples, where the total values shown at the bottom are the sum of the values of the active page. That is, page 1 will show running total of the 1st page; page 2 will display the total of 2nd page etc.Using ViewState [""], we can add and display a "Grand Total" either on every page’s footer or the last page itself. This may or may be the best solution, but it works without any issues.
  </p>
</body>

The Script

The script to do something only when I have scrolled half the page.

<script>
  let bDone = false;
  window.addEventListener('scroll', function (e) {
    if (document.documentElement.scrollTop > document.body.scrollHeight / 2) {
      if (!bDone)
      	r_fun ();
      
      bDone = true;
    }
  })

  let r_fun = () => {
    alert ("We've scrolled half way");
  }
</script>
</html>

Try it

The scrollHeight property returns the height of an element. So, I am dividing total scroll height of body (the height of the entire document) by "2". This will return the "half way" figure. Therefore, if the scrollTop of the "documentElement" is more than half the height, then it will do some task, like call a function.

See the above script again.

Happy coding. 🙂

← PreviousNext →

How to check if scroll has reached half page using JavaScript

Tools you can use