javascript - 根据滚动位置动态更改 href

Question

我正在尝试更改“下一步”按钮的 href，以便单击它会不断将用户从博客页面向下移动到下一个 anchor 。由于用户可以在不使用下一步按钮的情况下向下滚动，因此只要滚动经过 anchor ，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>

JS:

<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

使用类似 waypoints 的库.

那么你就不需要担心距离，滚动等等，只需要关心回调。