一页滚动自定义导航

OnePage Scroll custom nav

本文关键字：导航 自定义 滚动 一页      更新时间：2023-09-26

我 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

相关文章：