从 url (fullPage.js) 移除锚点

Question

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

为了 link 在我的页面内锚定，我从 fullPage.js FAQ 中插入了以下代码：

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

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

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

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

我的问题的视频演示：

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

Answer 1

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

如果您不想在 URL 上使用它们，则必须从 fullPage.js 初始化中完全删除选项 anchors。

然后，如果您需要创建任何内部 link，则必须同时使用 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

从 url (fullPage.js) 移除锚点

Removing anchor from url (fullPage.js)

javascript

jquery

history.js

fullpage.js