Infinite page scroll will done by using simple javascript and jquery. Here will give the code for infinite page scroll codes. The specific content and image will repeat when the scroll down continuously. This will use some where in your website. This jQuery plugin allowing you to effortlessly implement infinite scrolling.
Below is the Live demo using the images as a content. Those images are repeated when scroll down continuously. I hope this post is very useful.
Code for Javascript Infinite Page Scroll:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Javascript infinite page scroll</title>
<link rel="stylesheet" href="css/style.css">
<style>
h1 {
text-align: center;
}
.scroll-images {
margin: 0 auto;
padding: 0;
width: 400px;
list-style-type: none;
}
img{width:400px;}
</style>
</head>
<body>
<h1>Javascript infinite page scroll</h1>
<ul class="scroll-images">
<li>
<a href="http://demos.sanwebcorner.com/">
<img src="1.jpg" alt="" />
</a>
</li>
<li>
<a href="http://demos.sanwebcorner.com/">
<img src="2.jpg" alt="" />
</a>
</li>
<li>
<a href="http://demos.sanwebcorner.com/">
<img src="3.jpg" alt="" />
</a>
</li>
<li>
<a href="http://demos.sanwebcorner.com/">
<img src="4.jpg" alt="" />
</a>
</li>
<li>
<a href="http://demos.sanwebcorner.com/">
<img src="5.jpg" alt="" />
</a>
</li>
</ul>
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src="index.js"></script>
</body>
</html>
0 Comments