将动画添加到 jQuery 平滑滚动到锚点

Question

我正在尝试改进我作为另一个问题的答案发现的锚滚动代码。 它适用于另一个页面滚动，但如果它在同一页面中，则滚动时没有动画。 问题是，我也想为同一页面锚点制作动画，但我不知道如何包含它。

$(document).ready(function () {
    var urlHash = window.location.href.split("#")[1];
    if (urlHash &&  $('#' + urlHash).length )
          $('html,body').animate({
              scrollTop: $('#' + urlHash).offset().top - 60
          }, 2500);
});

Answer 1

也许看看W3Schools？

https://www.w3schools.com/howto/howto_css_smooth_scroll.asp#section1

回到当我使用平滑滚动的东西时，这段代码总是对我有用

Answer 2

如果您将代码分解为它自己的函数，那么除了将其用作就绪处理程序之外，您还可以在单​​击处理程序中使用该函数在单击锚链接时滚动：

 function scrollToAnchor (url) { var urlHash = url.split('#')[1]; if (urlHash && $('#' + urlHash).length) { $('html').animate({ scrollTop: $('#' + urlHash).offset().top - 60 }, 2500); } } $(document).ready(function () { scrollToAnchor(window.location.href); }); $('.nav-link').click(function (event) { event.preventDefault(); // stop the browser from snapping to the anchor scrollToAnchor(event.target.href); });

 .section { height: 300px; width: 300px; border: 1px solid #000; } .nav { right: 10px; top: 10px; position: sticky; display: block; width: 100%; height: 1.5em; background: #ccc; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="nav"> <a class="nav-link" href="#a">A</a> <a class="nav-link" href="#b">B</a> <a class="nav-link" href="#c">C</a> <a class="nav-link" href="#d">D</a> <a class="nav-link" href="#e">E</a> </div> <br> <div class="section" id="a">A</div> <div class="section" id="b">B</div> <div class="section" id="c">C</div> <div class="section" id="d">D</div> <div class="section" id="e">E</div>