时间戳

首页 > 解决方案 > Fullpage.js - 自定义按钮不会更新 URL 中的锚标记

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

问题描述

我正在使用 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/

标签： javascriptjqueryanchorfullpage.js

解决方案

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

可能的解决方案是

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

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

  2. 根据预期拥有/更新锚标签的href。

  3. 更改<a>为不同的元素类型，例如<button type="button">.

推荐阅读