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
Giving me +1 tells me you liked this article! Thanks in advance
Did you like this post?
|
|
||
|
|
|
Save on Delicious |
|
subscribe via rss |
|
subscribe via e-mail |
|
print this post |
|
follow me on twitter |
About The Author
comments
7 Responses to "Use jQuery to Detect if User has Scrolled to the Bottom or Top of a Page"hi, nicely done. :)
Is it also possible to scroll to bottom with jquery?
Try this untested code:
$('html, body').animate({scrollTop: $(document).height()}, 900);
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?
Working beautifully
Thanks.
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.
Thanks, but having trouble getting the bottom alert to fire on iPad... Any thoughts? Top works fine. iOS6, iPad 2.
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" });
Post a Comment