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

所以我的困境是：

我想在我的网站上，是固定在屏幕上的按钮，点击后将滚动到身体的下一个元素你但是我还想让它知道您是否已经向上滚动并相应地更新了下一个元素。例如，如果您两次单击该按钮，您将进入第三段，但如果您向上滚动到第二段并再次单击该按钮，则应再次进入第二段

我怎样才能做到这一点

下面是我正在查看的用于滚动视图的函数类型

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

HTML:

下一步
欢迎来到我的主页
这是第一段

这是第二段

这是第三段

这是最后一段

下面是一个plunker示例：

---

如何在向上滚动时进行此更改？

查找所有

p

元素，并滚动到偏移量大于当前滚动位置的元素，即

$（文档）。scrollTop（）

---

从您的中分叉。

查找所有

p

元素，并滚动到偏移量大于当前滚动位置的元素，即

$（文档）。scrollTop（）

---

你的叉子。

像这样的东西。。。我为第一个元素添加了一些任意的：+30，因为它与+1不兼容：=）

$（文档）.ready（函数（）{
var pos=$（“p”）.first（）.position（）；
$（'.button'）。单击（函数（）{
attr=$（document.elementFromPoint（位置左侧，位置顶部+30））；
attr=attr.next（）；
$（“html，body”）.animate({
scrollTop:$（attr）.offset（）.top
}, 700);
});
});

类似这样的东西。。。我为第一个元素添加了一些任意的：+30，因为它与+1不兼容：=）

$（文档）.ready（函数（）{
var pos=$（“p”）.first（）.position（）；
$（'.button'）。单击（函数（）{
attr=$（document.elementFromPoint（位置左侧，位置顶部+30））；
attr=attr.next（）；
$（“html，body”）.animate({
scrollTop:$（attr）.offset（）.top
}, 700);
});
});

谢谢！这正是我要找的，但我不知道怎么做！为我解决了这个问题，谢谢！谢谢这正是我要找的，但我不知道怎么做！为我解决了这个问题，谢谢！

<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>

<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);
    });
});