Question

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

我无法删除地址栏中的href内容。例如，我的链接滚动到ID为anchor-link-section的节块，而我的链接中有href = "index.php#anchor-link-section"。但是，在我的地址栏中，我看到www.site.com/index.php#anchor-link-section...。我该如何取下？
如果我已经在ID为section-scroll的页面上，并且我的href为href="index.php#section-scroll"的页面上，则该页面不会滚动，它会重新加载，以放置{ {1}}，然后滚动到我的ID

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

我已经尝试了以下方法：

www.site.com/index.php#section-scroll

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

编辑

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

$(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();
    }
});

但是现在我不再具有滚动动画了，但是页面之间的切换起作用了。

导航菜单代码html：

$(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();
  })
});

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 的URL，而不是相对于当前URL的其他路由路径。

jQuery滚动到另一页的某个部分

编辑

1 个答案: