jQuery滚动到另一页的一部分

Question

我正在尝试使用jQuery库创建一个新脚本以滚动到页面上的特定ID，但是我有两个问题：

1. 我无法删除地址栏中的href内容。 例如，我的链接滚动到ID为anchor-link-section的节块，而我的链接中具有href = "index.php#anchor-link-section" 。 但是，在我的地址栏中，我看到www.site.com/index.php#anchor-link-section... 我该如何取下？

2. 如果我已经在我的ID是section-scroll的页面上，而我的href是href="index.php#section-scroll" ，则该页面不会滚动，它会重新加载以放入www.site.com/index.php#section-scroll在我的地址栏中，然后滚动到我的ID

我正在使用jQuery 3.3.1和jQuery UI 1.12.0。 我使用网址重写技术（例如：www.site.com/index）

我已经尝试了以下方法：

$(document).ready(function() {
    $('html, body').hide();

    if (window.location.hash) {
        setTimeout(function() {
            $('html, body').scrollTop(0).show();
            $('html, body').animate({
                scrollTop: $(window.location.hash).offset().top
                }, 1000)
        }, 0);
    }
    else {
        $('html, body').show();
    }
});

我没有滚动动画，无法在不修改地址栏的情况下从页面上滚动到ID。

编辑

我按照jom的建议更新了代码：

$(document).ready(function() {
  $('html, body').hide();

  if $(window.location.hash'a[href$="index#lien-ancre-commu"]') {
    setTimeout.click(function (e) { 

      $('html, body').scrollTop(0) e.showpreventDefault(); 

        $('html, body').animate({
          scrollTop: $(window.locationthis.hash).offset().top
      }, 1000)
    }, 01000);
  } else {
    $('html, body').show();
  })
});

但是现在我不再具有滚动动画，而是可以在页面之间进行切换了。

导航菜单代码html：

<ul class="nav navbar-nav navbar-right">
              <li><a href="">Accueil</a>
              </li>
              <li><a href="/index.php#lien-ancre-commu">Communauté</a>
              </li>
              <li><a href="/index.php#lien-ancre-contact">Contact</a>
              </li>
              <li><a href="commu">Médias</a>
              </li>
              <li class="dropdown"><a class="fas fa-angle-down" data-toggle="dropdown">Plus</a>
                <ul class="dropdown-menu">
                  <a href="commu">Admin</a>
                </ul>
              </li>
            </ul>

Answer 1

一个简单的Event.preventDefault()应该可以解决问题。 这样，您就不必处理在地址栏中删除URL的哈希部分的问题-它永远不会被追加到该地址栏中。

$(document).ready(function (e) {

  if (window.location.hash) {
    scrollToSection(window.location.hash);
  }

});

$('a[href$="#lien-ancre-commu"]').click(function (e) {
  // Tells the browser not to mess with our links or anchor tags
  e.preventDefault();

  // Because we are redefining how it should behave...
  if (this.pathname === window.location.pathname) {
    // ...that is to scroll to a section of the page
    // IF we are on the intended page
    scrollToSection(this.hash);
  }
  else {
    // Otherwise, redirect them to the page
    window.location.replace(this.href);
  }
});

function scrollToSection(id) {
  $('html, body').animate({
    scrollTop: $(id).offset().top
  }, 1000);
}

在所有这些位置上，您将使用以下格式的链接/锚标签：

<a href="/index.php#lien-ancre-commu">Scroll to section</a>

请注意正斜杠字符（ / ），我们将需要它，因为添加它意味着我们将重定向到相对于应用程序基本路径的URL ，而不是相对于当前路径的其他路由。