FadeIn 后的滚动问题

Question

我在 div 中淡入后出现滚动问题。它正常工作，当 div 可见时，但是当你点击导航时，它会导致它从不可见淡入然后滚动，我收到这个错误：

未捕获的类型错误：无法读取未定义的属性“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 处单击导航时，div 正在淡出，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>