Jquery scroll navigation can't detect current section

Question

I made a page that contains several divs with class content

<div class="content" id="content-0">content 1</div>
<div class="content" id="content-1">content 2</div>
<div class="content" id="content-2">content 3</div>
<div class="content" id="content-3">content 4</div>
<div class="content" id="content-4">content 5</div>

I also made 2 links that switch between next and previous div

<div class="nav">
    <a id="prev" href="#">previous</a>
    <a id="next" href="#">next</a>
</div>

I used TwinMax and ScrollTo plugins to make navigate between the divs

var section = 0;
    var number = $('.content').length;
        $("#next").click(function(e){
          e.preventDefault();

          if(section < number){
            section++;
          }
          TweenMax.to(window, 0.5, {scrollTo:{y:$("#content-" +    section).offset().top}});
        });

        $("#prev").click(function(e){
          e.preventDefault();
          if(section > 0){
            section--;
            TweenMax.to(window, 0.5, {scrollTo:{y:$("#content-" + section).offset().top}});
          }

        }); 

Here is aJSFiddle.

The problem is this:

When I scroll with the mouse to the last section and then click the next buttom , the page scrolls back to the second section .

How do I detect the current div so the next button goes to the next div correctly?

Answer 1

The accepted answer on this question might help you: Check if element is visible after scrolling

After checking if the element is on the page you could set section = element number.