Fullpage.js - 自定义按钮不会更新 URL 中的锚标记
Fullpage.js - Custom button won't update the anchor tag in 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/
那是因为 .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 栏中的锚点名称不会更新。
奇怪的是,如果您单击浏览器上的后退按钮,它会显示在 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/
那是因为 .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">
。