从 url (fullPage.js) 中删除锚点

问题描述

我一直在玩 fullPage.js，但我遇到了这个我无法解决的问题。

为了链接到我的页面内的锚点，我插入了 fullPage.js FAQ 中的以下代码：

  new fullpage('#fullpage',{
    anchors: ['firstPage','secondPage','thirdPage']
  });

它工作正常，但当我滚动浏览不同部分时，我的网址现在从 www.example.com 到 www.example.com/#secondPage

我想要做的是从 URL 中完全删除 #/secondPage，但仅删除哈希值对我来说也足够了。

我做了一些研究，发现这在 jQuery 中都是可行的，但应该通过历史 API 来完成（我仍然不明白是什么），但我不是对 JS 非常有经验，更不用说它的库了，不知道从哪里开始。

我的问题的视频演示：

https://www.youtube.com/watch?v=17syDii2buA&ab_channel=didurd1

解决方法

使用 anchors 选项的全部目的实际上是在部分更改时在 URL 上创建锚点。这些用作“内部链接”，因此您可以使用它们来链接到页面的其他部分。

如果您不希望它们出现在 URL 中，则必须从 fullPage.js 初始化中完全删除选项 anchors。

然后，如果您需要创建任何内部链接，则必须将 jQuery/JavaScript 与 fullPage.js 方法 moveTo 一起使用。例如：

<a href="#" class="link" data-section="2" data-slide="1">Link here</a>
<a href="#" class="link" data-section="3">Link here</a>

$('.link').click(function(){
    var sectionIndex = $(this).attr('data-section');
    var slideIndex = $(this).attr('data-slide') || 0;
    fullpage_api.moveTo(sectionIndex,slideIndex);
});

在线演示： https://codepen.io/alvarotrigo/pen/LYWpeGq