Skip to main content

jQuery Detect % Scrolled on Page

By Sam Deering

JavaScript

Share:

😳 Ever felt a little embarassed sharing your JavaScript? Let's fix it.

jQuery code snippet to create an event action when a user has scrolled down to a percentage of the web page. We have tested that it’s best to use values between 55 and 100% when catching mouse scrolls.

$(document).ready(function(){

//Example - show a div after 75% of the web page is scrolled.
var webpage = $("body");
var webpage_height = webpage.height();
//alert(webpage_height);
var trigger_height = webpage_height * 0.75;


if ($(window).scrollTop() > (webpage_height-trigger_height)) {
	//alert($(window).scrollTop()+" > "+(webpage_height-trigger_height));
	$("#divtoshow").show();
}

});

Sam Deering has 15+ years of programming and website development experience. He was a website consultant at Console, ABC News, Flight Centre, Sapient Nitro, and the QLD Government and runs a tech blog with over 1 million views per month. Currently, Sam is the Founder of Crypto News, Australia.

New books out now!

💁‍♀️ Fun Fact: Python was ranked #2 on a recent highest paid coders list. *


🤓 Ok. When did a code editor from Microsoft become kinda cool!?