使用jQuery动画滚动到主页部分

Question

我希望能够使用jquery在首页部分上滚动。 但是无论我在哪一页上，我都想在主页上滚动。

html如下：

<ul>
  <li class="nav-item active">
    <a href="#home" class="nav-link p-0">Home </a>
  </li>
  <li class="nav-item">
    <a href="#about-us" class="nav-link p-0">About us</a>
  </li>
  <li class="nav-item">
    <a href="#references" class="nav-link p-0">References</a>
  </li>
</ul>

动画滚动的jquery函数如下：

$(".nav-link").on("click", function (e) {
  e.preventDefault();
  var target = $(this).attr("href");
  $('html, body').animate({scrollTop: $(target).offset().top}, 800, 'linear');
});

当我在主页上时，在网址www.my-url.com ，当我单击.nav-link它变成www.my-url.com/#about-us ，它滚动到需要滚动的位置动画，那很好。

但是问题是当我不在主页上的其他页面上时，例如www.my-url.com/some-page ，然后当我单击.nav-link它变成了www.my-url.com/some-page#about-us ，并且不会滚动。

如果我单击主页以外的其他页面上的链接，如何首先转到主页，然后应用滚动动画？

任何想法？

Answer 1

用这个

<script>
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function (e) {
    e.preventDefault();

    document.querySelector(this.getAttribute('href')).scrollIntoView({
        behavior: 'smooth'
    });
  });
});
</script>