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');
});

当我在主页上时，在URL 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>

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

1 个答案: