Question

我在div淡化后出现滚动问题。当div可见时，它可以正常正常工作，但是当您单击nav时，这会导致它从不可见状态逐渐淡入，然后滚动，出现此错误：

未捕获的TypeError：无法读取未定义的属性'substr'

HTML代码

<nav><a href="#a1"></a><a href="#a2"></a><a href="#a3"></a></nav>
<main> /*in which i have few anchors to scroll to
<a name="a1"></a>
/*some code
<a name="a2"></a>
/*some code
<a name="a3"></a>
/*some code
</main>
<div id="additionalinfo" style="display: none"> /* div which goes in when main fadesout and viceversa
/*some code
</div>

jQuery

$('nav a[href^="#"]').click(function () {
    if ($('#additionalinfo').is(":visible")) {
        $('#additionalinfo').fadeOut(function () {
            $('main').fadeIn(function () {
                $('html, body').animate({
                    scrollTop: $('[name="' + $.attr(this, 'href').substr(1) + '"]').offset().top
                }, 500);

                return false;
            });
        });
    }

尝试了很多，但仍无法解决。我要在此处执行的操作是，当您在#additionalinfo上的ur逐渐消失，main逐渐消失时，单击导航，然后应滚动到main的右侧锚点。最后一部分根本不起作用。有想法吗？

Answer 1

在$('[name="' + $.attr(this, 'href').substr(1) + '"]')中，this并不是您所想的... this的范围始终与当前函数有关：在这种情况下，$('html, body').animate()。因此this是'html, body'，而不是单击的元素。这就是为什么会出错，因为这些元素上没有href。

因此，在点击处理程序中，您将立即在变量中获得href属性：

var target = $(this).attr('href').substr(1);

其他事项：您必须使用.preventDefault()来防止正常的链接行为，因此它不会“替代”您的.animate()效果。

我不知道这里#additionalinfo的用途是什么...而且我假设您的HTML标记和脚本很多，还不够“完整”，无法重现该问题。

$('nav a[href^="#"]').click(function (e) {
  e.preventDefault();
  console.log("click");
  
  var target = $(this).attr('href').substr(1);
  console.log(target);
  
  if ($('#additionalinfo').is(":visible")) {
    $('#additionalinfo').fadeOut(function () {
      $('main').fadeIn(function () {
        $('html, body').animate({
          scrollTop: $('[name="' + target + '"]').offset().top
        }, 500);
        return false;
      });
    });
  }else{
    $('#additionalinfo').show();  // Assumed this to make the previous condition true someday...
  }
});

#additionalinfo{
  border:1px solid black;
  height:1em;
}
.spacer{
  height:50em;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<nav>
  <a href="#a1">a1</a>
  <a href="#a2">a2</a>
  <a href="#a3">a3</a>
</nav>
<div id="additionalinfo" style="display: none">-- Additionnal Info --</div>
<main>
  <a name="a1">MAIN a1</a><br>
  <div class="spacer"></div>
  <a name="a2">MAIN a2</a><br>
  <div class="spacer"></div>
  <a name="a3">MAIN a3</a>
  <br>
  <div class="spacer"></div>
</main>

FadeIn之后滚动的问题

1 个答案: