Question

所以我的困境是：

我想在我的网站上找到一个固定在屏幕上的按钮，点击后会滚动到正文中的下一个元素。但是我还想知道你是否已经向上滚动并相应地更新下一个元素。例如，如果您单击了按钮两次，则您在第3段，但如果您向上滚动到第二个并再次单击该按钮，则应该再次转到第2段。

我该如何做到这一点？

这是我正在寻找滚动视图的函数类型

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

以下是一个有关的例子：http://plnkr.co/edit/5nNcroXUXespRw1P8jZt?p=info

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

Answer 1

找到所有p元素并滚动到偏移量大于当前滚动位置的元素，即$(document).scrollTop()

Here's an example与您分道扬。

Answer 2

这样的东西......我添加了一些随意的：+30，因为它不能与+1一起使用，对于第一个元素：=）

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

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

2 个答案: