scroll to next/previous div not working with manual scrolling

Question

Currently, I'm trying to build a site using jQuery scrolling. My code works but my problem is that using my code, once you've reached the bottom and you manually scroll up, the down button stops working. How do I get the the down button to work, even after manually scrolling to the top?

my current html code :

<div class="down">next post</div>
<div class="container">
     <div class="posts"></div>
     <div class="posts"></div>
     <div class="posts"></div>
     <div class="posts"></div>
     <div class="posts"></div>
</div>

and my jquery code :

var $currentElement = $('.posts').first();
$('.down').click(function() {
    var $nextElement = $currentElement.nextAll('.posts');
    if($nextElement.length) {
        $currentElement = $nextElement;
        $('html, body').stop(true).animate({
            scrollTop: $nextElement.offset().top
        }, 900, 'swing')
    }
    return false;
});

Answer 1

Use this fiddle...

var currentElement = $('.posts').first();
$('.down').click(function() {
  var nextElement = currentElement.nextAll('.posts');
  console.log(nextElement);
  if(nextElement.length) {
      currentElement = nextElement;
      $('html, body').stop(true).animate({
          scrollTop: nextElement.offset().top
      }, 900, 'swing');
  }
  return false;
});