jQuery-如何使按钮滚动到下一个div，但如果向上滚动则响应

Question

So my dilemma is this:

I want a button on my website that is fixed to the screen and after being clicked will scroll you to the next element in the body. BUT I also want it to know if you have scrolled up and update whichever is the next element accordingly. For example, if you have clicked the button twice you are on the 3rd paragraph, but if you scroll back up to the second and click the button again, it should take you to the 2nd paragraph again.

How can I accomplish this?

Heres the type of function I'm looking at for scrolling the view

$(document).ready(function(){
    var attr = $("p").first();
    $('.button').click(function() {
       attr=attr.next();
       $("html, body").animate({
         scrollTop: $(attr).offset().top
    }, 700);
    });
});

HTML:

<div class="button">NEXT</div>

<h1>Welcome to My Homepage</h1>

<p>This is the first paragraph.</p>
<p>This is the second paragraph.</p>
<p>This is the third paragraph.</p>
<p>This is the last paragraph.</p>

Here's a plunker example: http://plnkr.co/edit/5nNcroXUXespRw1P8jZt?p=info

How can I make this change as you scroll up?

Answer 1

Find all p elements and scroll to the one that has an offset greater than the current scroll position ie $(document).scrollTop()

Here's an example forked from yours.

Answer 2

Something like this... I added some arbitrary : +30, as it doesn't work with +1, for the first element :=)

<script>
$(document).ready(function(){
    var pos  = $("p").first().position();

    $('.button').click(function() {
      attr =    $(document.elementFromPoint(pos.left, pos.top+30));
       attr=attr.next();
       $("html, body").animate({
         scrollTop: $(attr).offset().top
    }, 700);
    });
});