Question

我试图改变＆＃34; next＆＃34;的href。按钮，以便单击它将不断将用户从博客页面移动到下一个锚点。由于用户可以在不使用下一个按钮的情况下向下滚动，因此只要滚动过去，href就需要改变。按钮相对于窗口固定，因此保持可见。

令人沮丧的是，我收到了不一致的结果 - 第一次在页面下方，链接更新为＃post-1和＃post-2，但是post-2似乎没有将href更新为＃后的3。然后在3之后将href更新为＃post-4（目前还不存在，但现在只能在该点旁边。）但是当从底部向上滚动时，后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这样的库。

然后你不需要担心距离，滚动等等，只需要回调。

Answer 2

我认为你的距离变量超出了-30＆lt; x＆lt;滚动时为30范围，因此您错过了触发点。

检查出来：Check if element is visible after scrolling

您可以使用“isScrolledIntoView”函数，然后使用jquery选择当前滚动到view元素的下一个兄弟。然后，将您的锚更改为链接。

Answer 3

这是我使用Waypoints的解决方案，以防其他人遇到此问题。

        $(document).ready(function(){

            $('.anchor').each(function () {
                new Waypoint({
                    element: this,
                    handler: function(direction) {

                        var previousWaypoint = this.previous();
                        var nextWaypoint = this.next();

                        if (this != this.group.last()){
                            document.getElementById('blog-next').setAttribute('href','#' + nextWaypoint.element.id)
                            $('#blog-next').show();
                        } else {
                            $('#blog-next').hide();
                        };
                    }
                })
            })
         });

根据滚动位置动态更改href

3 个答案: