Fullpage.js

Question

我正在使用 fullpage.js 创建一个带有滚动幻灯片的网站。一切都按预期工作，除了随机显示幻灯片的按钮。单击该按钮时，网站会滚动到预期的幻灯片，但 URL 栏中的锚点名称不会更新。

奇怪的是，如果您单击浏览器上的后退按钮，它会显示在 URL 栏中，然后在第二次单击时返回到上一张幻灯片。我的假设是实际锚点被正确捕获，但某些东西阻止它显示在 URL 栏中。

这是我正在使用的代码：

// Capture the number of slides
ritualsCount = window.ritualsCount;

// Create the anchors
function buildRitualAnchors() {
  var array = [];

  for (i = 0 ; i < (ritualsCount + 1); i++) {
    array.push("page" + i);
  }
  return array
}

// Randomizer button
$('.randomizer').click(function() {
    var randomNumber = Math.floor((Math.random() * ritualsCount) + 2);
    fullpage_api.moveTo(randomNumber, 1);
});

我在这里错过了什么？我试过弄乱 location.hash，但它似乎已经很好地捕获了这些信息。

您可以在此处查看该网站 - https://be-inclusive.sypartners.com/

Answer 1

那是因为 .randomizer 是锚标签。单击任何锚标记时，它具有重定向到它的默认行为 href。在您的情况下，即 #，因此在您的点击处理程序事件侦听器完成执行后，它会重定向到锚标记的 href。

可能的解决方案是

您可以使用 event.preventDefault() 来停止该默认行为。

$('.randomizer').click(function() {
     event.preventDefault();
     var randomNumber = Math.floor((Math.random() * ritualsCount) + 2);
     fullpage_api.moveTo(randomNumber, 1);
 });

Having/Updating 锚标签的 href 符合预期。
将 <a> 更改为不同的元素类型，例如 <button type="button">。

Fullpage.js - 自定义按钮不会更新 URL 中的锚标记

Fullpage.js - Custom button won't update the anchor tag in URL

javascript

jquery

anchor