Last updated on March 4th, 2022 at 02:20 pm
You might have noticed in many websites that they automatically load data once we scroll browser window down. Most of them use jQuery as it is easy to implement since it has all built in functions. Here I will explain a simple code which will append content to a div at the bottom of a HTML webpage. The jQuery function will get triggered once you scroll the page and reach the bottom.jQuery
Load the jquery library as usual
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
Once that is done add the below code.
$(window).scroll(function() {
console.log("Scrolling Started")
console.log($(window).scrollTop())
console.log($(document).height())
console.log($(window).height())
console.log($(document).height() - $(window).height())
var the_diff=$(document).height() - $(window).height()
var get_diff= the_diff - $(window).scrollTop()
console.log("The difference is "+get_diff)
var orginal_val = 1
if(get_diff <= orginal_val) {
console.log("I am in the scroll...")
if ($('#msg:contains("Some text")').length < 1)
{
$('#msg').append('<font color=red>Some text, This is just appended at the bottom of this page. You are free to add your own :)</font>').show();
}
else
{
console.log("No Reloading");
}
}
else
{
console.log("I am not activated")
}
})
As we can see we have used 3 main functions from jQuery
1) window.scroll
2) :contains
3) $.append()
Code explanation, Let us assume that #msg is the div element and we already have some content inside that. All we are doing here is when the browser reaches bottom of the webpage we are just checking whether current vertical position of scroll bar is equal to the difference between the HTML document height and window height. Once that condition is true the next step is to check whether div #msg contains a specific word, As per the program above we are checking whether it contains text named “Some text“. You can add your own according to the content you are loading. This will prevent duplicate appending of data.
If the condition is False Console.log will display output accordingly on your Firebug console. This is only for testing purpose.
Entire code will look like this
<!DOCTYPE html>
<html>
<head>
<title>Jquery auto load more data on scroll
</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(window).scroll(function() {
var the_diff=$(document).height() - $(window).height()
var get_diff= the_diff - $(window).scrollTop()
console.log("The difference is "+get_diff)
var orginal_val = 1
if(get_diff <= orginal_val) {
console.log("I am in the scroll...")
if ($('#msg:contains("Some text")').length < 1)
{
$('#msg').append('<font color=red>Some text, This is just appended at the bottom of this page. You are free to add your own :)</font>').show();
}
else
{
console.log("No Reloading");
}
}
else
{
console.log("I am not activated")
}
})
</script>
</head>
<body>
<div id="msg">
<p>This is a test page</p>
<p>Click me away!</p>
<p>Scroll Down!!</p>
<p>Scroll Down!!</p>
<p>Scroll Down!!</p>
<p>Scroll Down!!</p>
<p>Scroll Down!!</p>
<p>Scroll Down!!</p>
<p>Scroll Down!!</p>
<p>Scroll Down!!</p>
<p>Scroll Down!!</p>
<p>Scroll Down!!</p>
<p>Scroll Down!!</p>
<p>Scroll Down!!</p>
<p>Scroll Down!!</p>
<p>Scroll Down!!</p>
<p>Scroll Down!!</p>
<p>Scroll Down!!</p>
<p>Scroll Down!!</p>
<p>Scroll Down!!</p>
<p>Scroll Down!!</p>
<p>Scroll Down!!</p>
<p>Scroll Down!!</p>
<p>Scroll Down!!</p>
<p>Scroll Down!!</p>
<p>Scroll Down!!</p>
<p>Scroll Down!!</p>
</div>
</body>
</html>
In our next tutorial we will show you how to add a PHP / MYSQL page and pull more data dynamically on scroll.