我 http://www.graphink.be 使用OnepageScroll插件建立了这个网站。我遇到了插件最奇怪的行为。
我将自定义导航与滚动效果挂钩。
当我单击导航链接时,按照向下部分,插件将在每次单击时自动跳过一个部分。
含义:单击第二个链接,它将移动到第三个,单击第三个,它将移动到第 4 个,依此类推,单击最后一个链接时创建一个空白部分。
最奇怪的是,它似乎在链接之后工作正常......
这是我为自定义导航创建的小 js:
$(document).ready(function(){
$("nav > input").click(function(){
$(".content").moveTo($(this).data("target"));
});
// Set up nav bar
// ---------------------------------------------------------------------------
$("#logo").on('click', function(){$(".content").moveTo(1);});
$(".arrow").on('click', function(){
$(".content").moveDown();
});
$("#nav_home").on('click ', function(){$(".content").moveTo(1); });
$("#nav_work").on('click ', function(){$(".content").moveTo(2);});
$("#nav_about").on('click ', function(){ $(".content").moveTo(3); });
$("#nav_contact").on('click ', function(){$(".content").moveTo(4);});
});
我显然在某处犯了一个错误,但我就是找不到它......
我会尝试从单击的元素中获取部分索引,并确保索引始终正确:
$('nav li a').click(function(e) {
var sectionIndex = $(this).data("target");
console.log(sectionIndex); // print to check
$('.content').moveTo(sectionIndex);
});
,部分索引从 0 开始。就像在javascript或jquery中一样。虽然在文档中不是很清楚...
$.fn.moveTo(page_index)
此方法允许您以编程方式移动到指定的页面索引。
将 data-target
属性更改为每个属性少一个数字。
<ul>
<li> <a href="#intro" id="nav_home" data-target="0">Home</a></li>
<li> <a href="#work" id="nav_work" data-target="1">Work</a></li>
<li> <a href="#about" id="nav_about" data-target="2">About</a></li>
<li> <a href="#contact" id="nav_contact" data-target="3">Contact</a></li>
</ul>
如果您仍然遇到麻烦,我建议您尝试 fullPage.js它集成了menu
选项和许多其他有用的选项和配置。
我认为这与"a"的href属性有关尝试从导航的"a"元素中删除 #intro #work #contact 和 #about