Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Loading content on scroll to bottom on page using Jquery
<html>
<head>
<title>Scroll to bottom Detection</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
var count=0;
$(document).ready(function(){
SetValues();
$(window).scroll(function(){
//Will check if the user has reached bottom of a PAGE
SetValues();
//Check for user has reached bottom of Page
if($(window).scrollTop()==($(document).height()-window.innerHeight)){
$('#loading').fadeIn();
setTimeout("appendContent()", 1000);
}
});
});
var appendContent=function(){
//alert("You are At Bottom");
$('#content').append("@@@@@@@@@ ---------- "+count+" TIMES ---------- @@@@@@@@@<br/>");
count++;
for(var i=0;i<10;i++){
$('#content').append("This is Dynamic Added Content<br/>");
}
$('#loading').fadeOut();
};
var SetValues=function(){
$('table tr:first-child td:nth-child(2)').html($(window).scrollTop());
$('table tr:first-child td:nth-child(4)').html($(document).height());
$('table tr:first-child td:nth-child(6)').html(window.innerHeight);//$(window).height()
};
</script>
<style type="text/css">
*{
font-family: verdana;
}
table{
width: 100%;
padding:5px 10px;
position: fixed;
top: 0;
left: 0;
text-align: center;
color:white;
background: rgba(0,0,23,0.71);
box-shadow: 0 0 10px black;
}
#content{
padding-bottom: 60px;
}
#loading{
display:none;
width: 100%;
padding:5px 10px;
position: fixed;
bottom: 0;
left: 0;
text-align: center;
color:white;
background: rgba(0,0,23,0.71);
box-shadow: 0 0 10px black;
}
table td:nth-child(2n){
width:50px;
background: white;
box-shadow: 0 0 10px white;
color:black;
}
table td:nth-child(1n){
text-shadow: 0 0 10px white;
}
</style>
</head>
<body>
<table>
<tr>
<td>
Window Scroll :
</td>
<td>0</td>
<td>
Document height :
</td><td>0</td>
<td>
Window Height :
</td><td>0</td>
</tr>
</table>
<div id="content" align="center">
This is My Content<br/>
This is My Content<br/>
This is My Content<br/>
This is My Content<br/>
This is My Content<br/>
This is My Content<br/>
This is My Content<br/>
This is My Content<br/>
This is My Content<br/>
This is My Content<br/>
This is My Content<br/>
This is My Content<br/>
This is My Content<br/>
This is My Content<br/>
This is My Content<br/>
This is My Content<br/>
This is My Content<br/>
This is My Content<br/>
This is My Content<br/>
This is My Content<br/>
This is My Content<br/>
This is My Content<br/>
This is My Content<br/>
This is My Content<br/>
This is My Content<br/>
This is My Content<br/>
This is My Content<br/>
This is My Content<br/>
This is My Content<br/>
This is My Content<br/>
This is My Content<br/>
This is My Content<br/>
This is My Content<br/>
This is My Content<br/>
This is My Content<br/>
This is My Content<br/>
This is My Content<br/>
This is My Content<br/>
This is My Content<br/>
This is My Content<br/>
This is My Content<br/>
This is My Content<br/>
This is My Content<br/>
This is My Content<br/>
This is My Content<br/>
This is My Content<br/>
This is My Content<br/>
This is My Content<br/>
This is My Content<br/>
This is My Content<br/>
This is My Content<br/>
This is My Content<br/>
</pre>
<div id="loading">
Loading Please Wait......
</div>
</body>
</html>
@meumapati

This comment has been minimized.

Copy link

@meumapati meumapati commented Sep 1, 2019

how can i use in php with mysql db

@sphingu

This comment has been minimized.

Copy link
Owner Author

@sphingu sphingu commented Sep 1, 2019

@meumapati
instead of setTimeout("appendContent()", 1000); line, you need to do backend API call to get data.

@Pedders1995

This comment has been minimized.

Copy link

@Pedders1995 Pedders1995 commented Sep 13, 2019

how would you do the backend API, this is exactly what I have spend days and days on, Just need to get it to work with my database.
Great Job

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.