javascript - 淡入后滚动的问题

Question

我在 div 淡入淡出后遇到滚动问题。它正常工作非常好，当 div 可见时，但是当您单击导航时，这会导致它从不可见淡入然后滚动，我收到此错误:

Uncaught TypeError: Cannot read property 'substr' of undefined

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>

查询

$('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 中的右侧 anchor 。最后一部分根本不起作用。一些想法？

Answer 1

在 $('[name="' + $.attr(this, 'href').substr(1) + '"]') 中，this不是你想的那样...... this 的范围总是与当前函数相关:$('html, body').animate() in this案件。所以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>