CODEWITHSUNDEEP
javascriptjqueryhtmlcss
AntonyMN
AntonyMN

Reputation: 919

Get the end of window.scrollby

I want to implement a page that continuously scrolls, such that when it gets to the bottom on the page, it goes back to the top and scrolls back to the end. So far I have implemented 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, what I am trying to figure out is how to listen in to JS to when it gets to the bottom of the page, so that I can reintialize the autoscrolling from top again. Kindly help.

Upvotes: 0

Views: 856

Answers (1)

Cat Named Dog
Cat Named Dog

Reputation: 1698

You can test if the window is at the bottom with the following:

 $(window).scroll(function() {
     if ( $(window).scrollTop() + $(window).height() == $(document).height() ) {
        $(window).scrollTop(0);
    }
  });

On scroll, we test if the page is at the bottom, then reset the scroll position to 0 (top)

https://jsfiddle.net/qjvkgx9t/

Upvotes: 1

Related Questions