24 Jun

Measuring User Scroll with jQuery

Posted by Mike Categories: Blog
Measuring User Scroll with jQuery

It’s super easy to measure the amount a user scrolls down with jQuery. In fact, it’s not hard to grab a percentage of the page the user has scrolled either. Which means you can add some interactive portions to your page depending on how much the user has scrolled down your site. It’s just another way to grab user attention and define a rich interactive environment for your users.

To take action on user scroll do something like this:

$(document).scroll(function(e){

	// do something on user scroll here

});

To get the amount the user has scrolled:

var scrollAmount = $(window).scrollTop();

To get the height of the page:

var documentHeight = $(document).height();

To get the percentage of the page height the user has scrolled:

var scrollPercent = (scrollAmount / documentHeight) * 100;

Let’s say I wanted to do something when a user gets halfway down my page:

$(document).scroll(function(e){

	// grab the scroll amount and the window height
    var scrollAmount = $(window).scrollTop();
    var documentHeight = $(document).height();

    // calculate the percentage the user has scrolled down the page
    var scrollPercent = (scrollAmount / documentHeight) * 100;

	if(scrollPercent > 50) {
		// run a function called doSomething
		doSomething();
	}

	function doSomething() { 

		// do something when a user gets 50% of the way down my page

	}

});

Just wanted to share some helpful (and simple) ways to monitor user interaction.

2 Comments on “ Measuring User Scroll with jQuery ”

  1. Pierce December 21, 2011 at 1:42 AM

    Brilliant. Spent a week looking for the right way to do this just as you wrote it. I didn’t think there was a way to get the percentage.

  2. [...] Die ausgelagerte JavaScript-Datei beinhaltet drei Funktionen. Die erste Funktion $(document).ready() wird aufgerufen sobald die Seite vollständig geladen ist. Hier wird ein Startwert für den späteren SQL-Befehl von 0 und eine Anzahl Posts, die auf einmal zurückgeliefert werden sollen, festgelegt. Anschließend wird mit einer Schleife zwei Mal die Funktion loadcontent aufgerufen, da wir ja zu Anfangs schon 10 Posts im Browser anzeigen wollen. Dies erzeugt unter anderem die Grundlage dafür dass der Nutzer nach unten scrollen muss. Die Funktion loadcontent zeigt im ersten Schritt die Ladeanimation im DIV-Element loader an. Danach wird ein nicht asynchroner Ajax-Call vom Typ GET gemacht, bei dem die content.php mit den Parametern start und count aufgerufen wird. Hat das geklappt und wurde etwas zurückgeliefert, dann wird der Inhalt in den DIV container angefügt. Zudem, weil es geklappt hat, wird der Startwert für die SQL-Abfrage um fünf erhöht. Sobald nichts mehr zurückgeliefert wird, wird kein Inhalt mehr an den Container appended. Stattdessen wird dem DIV-Element end ein wenig HTML-Code für die Anzeige, dass keine weiteren Posts mehr vorhanden sind, zugewiesen. Die letzte Funktion wird immer gefeuert sobald man im Browser scrollt. Eine IF-Abfrage prüft ob man bis ans Ende der Seite gescrollt hat und führt dann die Funktion loadcontent aus. Möchte man Inhalte mit jQuery nachladen schon nachdem man z.B. 50 % des Bildschirms nach unten gescrollt hat, dann muss man das jQuery Konstrukt etwas umbauen. Anregungen dazu gibt es hier: http://iwearshorts.com/blog/measuring-user-scroll-with-jquery/. [...]

Leave a Reply
  1. XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>