Use jQuery to Detect if User has Scrolled to the Bottom or Top of a Page

Here’s a simple way to detect if the user has scrolled to the Top or Bottom of the page using jQuery

<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>Detect if User Scrolled - DevCurry.com</title>
    <script type="text/javascript"
    src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js">
    </script>
     <script type="text/javascript" language="javascript">
         $(function () {
             var $win = $(window);

             $win.scroll(function () {
                 if ($win.scrollTop() == 0)
                     alert('Scrolled to Page Top');
                 else if ($win.height() + $win.scrollTop()
                                == $(document).height()) {
                     alert('Scrolled to Page Bottom');
                 }
             });
         });
    </script>
</head>
<body>
    <div>Page Top</div><br />   
    <div style="height:1200px"></div>
    <div>Page Bottom</div>
</body>
</html>

Here's some explanation:

$(window).height() - returns height of browser viewport

$(document).height() - returns height of HTML document

$(window).scrollTop() – returns the current vertical position of the scroll bar.

So if the scroll bar is at the very top, the value of $(window).scrollTop() will be Zero. Similarly if the value of the browser viewport + vertical position of scroll bar = document height, then the user has scrolled to the bottom of the page.

See a Live Demo

About The Author

Suprotim Agarwal, Developer Technologies MVP (Microsoft Most Valuable Professional) is the founder and contributor for DevCurry, DotNetCurry and SQLServerCurry. He is the Chief Editor of a Developer Magazine called DNC Magazine. He has also authored two Books - 51 Recipes using jQuery with ASP.NET Controls. and The Absolutely Awesome jQuery CookBook.

Follow him on twitter @suprotimagarwal.

9 comments:

Anonymous said...: hi, nicely done. :)

Is it also possible to scroll to bottom with jquery?; October 26, 2010 at 5:17 AM
Suprotim Agarwal said...: Try this untested code:

$('html, body').animate({scrollTop: $(document).height()}, 900);; October 26, 2010 at 6:11 AM
macmadman said...: This is great! Is it possible to trigger another alert once the user begins scrolling up again? say if they scroll up 30px from the bottom of the page?; November 15, 2011 at 12:57 AM
Anonymous said...: Working beautifully

Thanks.; January 31, 2012 at 12:45 AM
Anonymous said...: Just in case anyone is having a problem getting the correct $(document).height, like I did, what I did to solve the problem was on document ready I used var doc = document.documentElement.clientHeight to get the correct height and put it in a variable, then used : if ($(window).scrollTop() >= $(window).height() - + doc + - 100) to establish the condition. I hope this helps someone.; January 8, 2013 at 10:58 PM
csayer said...: Thanks, but having trouble getting the bottom alert to fire on iPad... Any thoughts? Top works fine. iOS6, iPad 2.; January 16, 2013 at 3:37 PM
Suprotim Agarwal said...: csayer: Fixed positions are not supported in version < iOS 5.

A wild guess, but try the following:

$("#yourelementtoscroll").css({ "position": "relative" });

//scroll code comes here

$("#yourelementtoscroll")css({ "position": "fixed" });; January 16, 2013 at 8:10 PM
Unknown said...: Hi
It works great the first time it triggers the function. At the trigger function I load another page with more content to the main page. And it works great.
But when I scroll down to the bottom of new content, it won´t trigger anymore. What do I do wrong?
Thanks again for a great script!
Max; August 30, 2014 at 11:14 PM
Unknown said...: Thanks ,it works great; August 23, 2015 at 11:22 PM