Javascript - Detecting the bottom of the page.

Created March 21, 2011

When working on a project of mine, I needed to detect when a user was scrolling the page if they had reached the bottom. I tried looking for a simple solution; however, I could not find one. Well, using jQuery and a little Javascript this can easily be detected. The functionality to detect if a user has reached the bottom of the page is written below:

<script type="text/javascript">
		
	$(window).scroll(function() {
		
		if(document.height == window.pageYOffset + window.innerHeight)
		{
			// the bottom of the document has been hit.
		}
	});
		
</script>

Now, if you'd like to see this functioning, you can checkout the following demo page:

DEMO

The code for the demo page is found below:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
		<title>Javascript - Detecting the bottom of the page</title>
		
		<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
		<script type="text/javascript">
		
			$(window).scroll(function() {
			
				$('#notification2').html('document.height = ' + document.height);
				$('#notification3').html('window.pageYOffset + window.innerHeight = ' + (window.pageYOffset + window.innerHeight));
			
				if(document.height == window.pageYOffset + window.innerHeight)
				{
					// hit bottom
					$('#notification1').html('HIT BOTTOM');
				}
				else
				{
					$('#notification1').html('NOT AT BOTTOM');
				}
			});
		
		</script>
		
		<style type="text/css">
		
			body
			{
				margin:0px;
				padding:0px;
			}
		
			.box
			{
				width:400px;
				height:400px;
				margin:0px auto;
				background:#ccc;
			}
			
			.notification
			{
				position:fixed;
				color:#777;
				width:auto;
				height:auto;
				background:#ccc;
				padding:10px;
				font-family:Arial, Helvetica;
				font-weight:bold;
				
			}
		
		</style>
		
	</head>
	<body>
	
	<div class="notification" id="notification1">NOT AT BOTTOM</div>
	<div class="notification" style="top:50px;" id="notification2">document.height = </div>
	<div class="notification" style="top:100px;" id="notification3">window.pageYOffset + window.innerHeight = </div>
	
	
		<div class="box"></div>
		<div class="box"></div>
		<div class="box"></div>
		<div class="box"></div>
		<div class="box"></div>
		<div class="box"></div>
	
	</body>
</html>

Hope someone else can find this useful ;)