改进平滑滚动以获得 URL 地址栏上的锚链接

Question

正如标题所说，我发现 this script 可以平滑滚动并对其进行了一些改进，现在它看起来像这样：

  $('a[href*=#]:not([href=#])').on('click', function() {
    if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
      var target = $(this.hash);
      target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
      if (target.length) {
        $('html,body').animate({
          scrollTop: target.offset().top - 50 // in this case 50px BEFORE
        }, 1000);
        return false;
      }
    }
  });

当用户点击锚点时触发link。

问题是 URL 地址没有改变。我还想更改用户 URL 地址栏，以便在每次用户单击使他滚动的 link 时显示锚点 link。

在此先感谢您能给我的任何帮助。

PS: 你可以看到我测试这个的网站 here.

Answer 1

您可以使用以下方式更改地址：

if (target.length) {
    history.replaceState(null, null, this.hash);
    $('html,body').animate({
        scrollTop: target.offset().top - 50 // in this case 50px BEFORE
    }, 1000);
    return false;
}

如果您想更新浏览器历史记录，请改用：

history.pushState(null, null, this.hash);

More info

改进平滑滚动以获得 URL 地址栏上的锚链接

Improve smooth scrolling in order to get anchor links on the URL Adress bar

javascript

jquery

scroll

anchor

smooth-scrolling