Home

jQuery Scroll Up

jQuery scroll up is u plugin to load content when scrolling to the top of an element or a window.
Just like Facebook messages are loaded when you scroll up.

---

Options

• contentType: The type of the request (‘GET’ or ‘POST’)
• contentPage: The url of the ajax service where you get your data
• contentData: Additional data for the request
• beforeLoad: Event is triggered before the loading starts
• afterLoad: Event is triggered when the loading completes
• scrollTarget: The element that is scrolling
• heightOffset: When passing this height (in pixels) the loading starts

---

Include the libraries

<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
        <script type="text/javascript" src="jquery.scrollUp.1.0.0.js"></script>

---

Tip: scroll the window down before wiring up the plugin

$(window).scrollTop($(window).prop("scrollHeight"));

---

Wiring up the plugin to an element

$('#content').scrollUp({'contentType' : 'POST', //the type of the request
		'contentPage': '', // the page where you are searching for results
		'contentData': {}, // you can pass the children().size() to know where is the pagination
		'scrollTarget': $(window), // who gonna scroll? in this example, the full window
		'heightOffset': 100, // how many pixels before reaching begin of the page would loading start? positives numbers only please
		'beforeLoad': function(){ // before load, some function, maybe display a preloader div
			$('#loading').fadeIn();	
		},
		'afterLoad': function(elementsLoaded){ // after loading, some function to animate results and hide a preloader div
			 $('#loading').fadeOut();
			 var i = 0;
			 $(elementsLoaded).fadeInWithDelay();
			 if ($('#content').children().size() > 100){ // if more than 100 results loaded stop pagination (only for example)
			 	$('#nomoreresults').fadeIn();
				$('#content').stopScrollUp();
			 }
		});