javascript - JQuery - How to make a button scroll to next div, but respond if scrolled up -

so dilemma this:

i want button on website fixed screen , after being clicked scroll next element in body. but want know if have scrolled , update whichever next element accordingly. example, if have clicked button twice on 3rd paragraph, if scroll second , click button again, should take 2nd paragraph again.

how can accomplish this?

heres type of function i'm looking @ scrolling 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 homepage</h1>  <p>this first paragraph.</p> <p>this second paragraph.</p> <p>this third paragraph.</p> <p>this last paragraph.</p> 

here's plunker example: http://plnkr.co/edit/5nncroxuxesprw1p8jzt?p=info

how can make change scroll up?

find p elements , scroll 1 has offset greater current scroll position i.e. $(document).scrolltop()

here's example forked yours.