My goal is to create a page that smoothly scrolls continuously, where once it reaches the bottom, it goes back to the top and repeats the scrolling cycle. Currently, I have set up the basic structure of the page.
$(document).ready(function() {
var scroll = setInterval(function() {
window.scrollBy(0, 1);
}, 20);
});.content {
height: 500px;
width: 100%;
background-color: #cccccc;
}
.inner-content {
height: 80px;
width: 100%;
margin: 10px 0 10px 0;
background-color: #ff00ff;
}
h1 {
text-align: center;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="row content">
<div class="col-md-12 inner-content">
<h1>One</h1>
</div>
<div class="col-md-12 inner-content">
<h1>Two</h1>
</div>
<div class="col-md-12 inner-content">
<h1>Three</h1>
</div>
<div class="col-md-12 inner-content">
<h1>Four</h1>
</div>
<div class="col-md-12 inner-content">
<h1>Five</h1>
</div>
</div>Now, my challenge lies in finding a way for JavaScript to detect when the page has reached the bottom, so that I can trigger the autoscrolling from the top again. Any assistance on this matter would be greatly appreciated.