OnePage Scroll 自定义导航

Question

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

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

当我单击导航 links 时，随着向下的部分，插件将在每次单击时自动跳过一个部分。

含义：点击第2个link，它会移动到第3个，点击第3个，它会移动到第4个等等，点击最后一个[时会创建一个空白部分=26=].

最奇怪的是它似乎在 links 之后工作正常...

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

我觉得跟"a"的href属性有关系尝试从导航

的"a" 元素中删除#intro #work #contact 和#about

Answer 3

在我看来，部分索引从 0 开始。在 javascript 或 jquery 中总是如此。虽然文档里写的不是很清楚...

$.fn.moveTo(page_index)

This method allows you to move to the specified page index programatically.

将 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 Scroll 自定义导航

OnePage Scroll custom nav

html

javascript

css

scroll