OnePage 滚动自定义导航答案

【问题标题】：OnePage Scroll custom navOnePage 滚动自定义导航
【发布时间】：2016-01-30 04:38:06
【问题描述】：

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

我将自定义导航与滚动效果挂钩。

当我点击导航链接时，跟随 DOWN 部分，插件将在每次点击时自动跳过一个部分。

含义：点击第2个链接会移动到第3个，点击第3个会移动到第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);});

});

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

【问题讨论】：

标签： javascript html css scroll

【解决方案1】：

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

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

【讨论】：

嗨！感谢您的答复！我刚试过，它没有用。令人沮丧的是它以一种方式工作，而不是另一种......所以我想这意味着标记是正确的......对吗？还有其他想法吗？

【解决方案2】：

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

【讨论】：

您好，Alvaro，感谢您的回答！我听取了您的建议，并将整个内容更改为 FullPage.js... 似乎现在可以正常工作了！谢谢！
不客气！如果它对您有效，请不要忘记接受答案，因为将来也可能对其他人有效！ :)

【解决方案3】：

我认为这与“a”的href属性有关尝试从导航的“a”元素中删除#intro #work #contact 和#about

【讨论】：

感谢您的回复！！我尝试从每个'a'中删除href。没用...：-/我迷路了...有什么想法吗？