JQuery

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>

这是一个 plunker 示例：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，但如果向上滚动则响应

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

html

javascript

dom

scroll