Question

我创建了一个包含多个具有类内容的div的页面

<div class="content" id="content-0">content 1</div>
<div class="content" id="content-1">content 2</div>
<div class="content" id="content-2">content 3</div>
<div class="content" id="content-3">content 4</div>
<div class="content" id="content-4">content 5</div>

我还制作了2个在下一个和上一个div之间切换的链接

<div class="nav">
    <a id="prev" href="#">previous</a>
    <a id="next" href="#">next</a>
</div>

我使用TwinMax和ScrollTo插件在div之间进行导航

var section = 0;
    var number = $('.content').length;
        $("#next").click(function(e){
          e.preventDefault();

          if(section < number){
            section++;
          }
          TweenMax.to(window, 0.5, {scrollTo:{y:$("#content-" +    section).offset().top}});
        });

        $("#prev").click(function(e){
          e.preventDefault();
          if(section > 0){
            section--;
            TweenMax.to(window, 0.5, {scrollTo:{y:$("#content-" + section).offset().top}});
          }

        });

这是JSFiddle。

问题在于：

当我用鼠标滚动到最后一部分，然后单击下一个按钮时，页面会滚动回到第二部分。

如何检测当前div，以便下一个按钮正确转到下一个div？

Answer 1

此问题的接受答案可能会对您有所帮助：Check if element is visible after scrolling

检查元素是否在页面上后，您可以设置section =元素编号。

Jquery滚动导航无法检测当前部分

1 个答案: