Endless Page Scroll With jQuery

jQuery is a fantastic platform. It allows you to manipulate data quickly and easily, and on the most part you don't have to care about browser compatibility in the slightest.

On my new homepage I wrote a quick little snippet of jQuery to make the browser request more posts when the user gets to the bottom of the page, which, providing every user that goes onto my site doesn't hold down page down constantly is a elegant way to deliver more content to the user without bombarding them with links to other pages.

The Code

The code is simple; get the height of the page, the amount the user has scrolled down (from the top of the page) add those figures together and see if they equal the total page height s+h == h (if 's' is the amount scrolled and h the height of the page). The result:

$(window).scroll(function(){
	if($(document).scrollTop()+$(window).height() == $(document).height()){
		loadmorefunction();
	}
});

That code triggers when the user scrolls; and if the user is at the bottom of the page it triggers a function.

To do the same for a scrollable element you can use exactly the same method if you replace "window" with the element you want to use.

1 Comment

Add a Comment

Name (If it's not real, it better be cool)

Email (optional, used for your avatar)

URL (optional, makes your name link to your site)

Comment (No HTML, URLs are made clickable, press enter twice for a new paragraph. Type @name to reply.)