javascript - 仅当您不在当前页面上时，使用 jQuery 滚动到 anchor 才有效

Question

问题是，当我单击同一页面上具有主题标签的链接时，动画滚动不起作用。动画滚动仅在您不在当前页面时才起作用。

网址看起来像这样:

• website.com/about#people，
• website.com/about#contact

假设您位于“关于页面”并单击其中一个链接，则向下滚动动画将不起作用，但假设您位于主页并单击任何一个在这些链接中，动画确实有效。

不幸的是，我无法在代码片段上复制该问题，但我使用相同的 js 代码。奇怪的是，在这个片段上，即使您在同一页面，动画也能正常工作。不，我在控制台上没有收到任何错误。

谢谢!

$('nav a[href^="#"]').click(function(){
    $('html, body').animate({
        scrollTop: $(this.hash).offset().top
    }, 400);
    return false;
});

#topSection{
    background: red;
    height: 400px;
}

#middleSection{
    background: blue;
    height: 400px;
}
#lastSection{
    background: black;
    height: 400px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <nav>
        <ul>
            <li><a href="#topSection">Top Section</a></li>
            <li><a href="#middleSection">Middle Section</a></li>
            <li><a href="#lastSection">Last Section</a></li>
        </ul>
    </nav>
    <div id="topSection">
    </div>
    <div id="middleSection">
    </div>
    <div id="lastSection">
    </div>

Answer 1

当您访问带有哈希的页面时，滚动到哈希不起作用的原因是，仅在单击链接时才会调用您的代码。为了进一步阐述我的评论，您还需要在加载页面时调用相同的代码。

这可以通过简单地将点击处理程序中的所有逻辑抽象为一个可以独立于点击事件调用的函数来完成:

function smoothScrollTo(hash) {
  if (!hash)
    return;

  $('html, body').animate({
    scrollTop: $(hash).offset().top
  }, 400);
}

$(function() {
  // Smooth scrolling when the page is loaded
  smoothScrollTo(window.location.hash);

  // Smooth scrolling when a link is clicked
  $('nav a[href^="#"]').click(function() {
    smoothScrollTo(this.hash)
    return false;
  });
});

请参阅下面的概念验证:

function smoothScrollTo(hash) {
  if (!hash)
    return;

  $('html, body').animate({
    scrollTop: $(hash).offset().top
  }, 400);
}

$(function() {
  // Smooth scrolling when the page is loaded
  smoothScrollTo(window.location.hash);

  // Smooth scrolling when a link is clicked
  $('nav a[href^="#"]').click(function() {
    smoothScrollTo(this.hash)
    return false;
  });
});

#topSection {
  background: red;
  height: 400px;
}

#middleSection {
  background: blue;
  height: 400px;
}

#lastSection {
  background: black;
  height: 400px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<nav>
  <ul>
    <li><a href="#topSection">Top Section</a></li>
    <li><a href="#middleSection">Middle Section</a></li>
    <li><a href="#lastSection">Last Section</a></li>
  </ul>
</nav>
<div id="topSection">
</div>
<div id="middleSection">
</div>
<div id="lastSection">
</div>