基于滚动位置的动态变化href

Question

我正在尝试更改" next“按钮的href，这样单击它将不断地将用户向下移动到下一个锚。由于用户可以在不使用next按钮的情况下向下滚动，因此每当锚点滚动过去时，href就需要更改。按钮相对于窗口定位固定，因此保持可见。

令人沮丧的是，我收到了一个不一致的结果--第一次在页面下，链接更新到#post-1和# post-2，但是post-2似乎没有将href更新到#post-3。然后，post-3将href更新为#post-4 (这并不存在，但这暂时不重要)。但是当从底部滚动回来时，post-2突然起作用，而其他人却没有。

HTML：

<span id="post-0" class="anchor"></span>
  <div class="row blog-page">
    <a href="#post-1" id="blog-next">
      <i class="blog-arrow fa fa-chevron-down"></i>
    </a>
  </div>

<span id="post-1" class="anchor"></span>
  <div class="row blog-page">
    <h3>header</h3>
  </div>

<span id="post-2" class="anchor"></span>
  <div class="row blog-page">
    <h3>header</h3>
  </div>    

<span id="post-3" class="anchor"></span>
  <div class="row blog-page">
    <h3>header</h3>
  </div>

联署材料：

<script type="text/javascript">
   $(document).ready(function(){
      $(function () {
        var nextHash = 0;
           $(document).scroll(function () {
              $('.anchor').each(function () {
                 var top = window.scrollY;
                 var distance = top - $(this).offset().top;
                 var hash = parseInt($(this).attr('id').slice(5));

                 if (distance < 30 && distance > -30 && nextHash != hash) {
                    nextHash = hash + 1;
                    document.getElementById('blog-next').setAttribute('href', '#post-' + nextHash);
                 }
              });
           });
       });
   });
</script>

您可以在这里看到我的实时代码(右下角的向下箭头)：www.zaplings.com/blog

谢谢你的帮助。

Answer 1

使用像航路点这样的库。

然后，您将不需要担心距离，滚动等等，仅仅是回调。

Answer 2

我认为当你滚动时，你的距离变量已经超出了-30

看看这个：在滚动后检查元素是否可见

您可以使用"isScrolledIntoView“函数，然后使用jquery选择当前滚动到视图元素的下一个同级。然后，改变你的锚链接到它。