Question

我构建了这个网站http://www.graphink.be，我使用的是OnepageScroll插件。我遇到了插件最奇怪的行为。

我将自定义导航连接到滚动效果。

单击导航链接后，按下DOWN部分，插件将在每次单击时自动跳过一个部分。

含义：点击第二个链接，它将移动到第三个，点击第三个，它将移动到第四个，依此类推，在点击最后一个链接时创建一个空白部分。

最奇怪的是，在链接后似乎工作得很好......

这是我为自定义导航创建的小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);});

});

我显然在某个地方犯了一个错误，但我找不到它......

Answer 1

我会尝试从单击的元素中获取节索引，并确保索引始终正确：

$('nav li a').click(function(e) {
    var sectionIndex = $(this).data("target");
    console.log(sectionIndex); // print to check
    $('.content').moveTo(sectionIndex);
});

Answer 2

我认为它与＆＃34; a＆＃34;的href属性有关。尝试从＆＃34; a＆＃34;删除#intro #work #contact和#about。导航元素

Answer 3

在我看来，节索引从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选项和许多其他有用的选项和配置。

OnePage滚动自定义导航

3 个答案: