Question

我用fullpage.js脚本创建了多个页面，这是一个很好的插件。我有一个场景，其中一个页面有多个子部分，我希望锚点导航链接到相关页面，如果页面有多个子部分，那么它应该滚动浏览这些部分，依此类推。

为了简化，我设置了示例http://codepen.io/anon/pen/EgXbWj

在这个例子中，当我点击First Section导航时，它会转到第一部分..如果我点击第二部分它会转到第二部分......

现在如果我点击第三部分导航，我会转到Section Two sub page one部分，而我希望它转到Section Three

如何在这种情况下使其发挥作用。

<div id="fullpage">
    <div class="section">Section One</div>
    <div class="section">Section Two</div>
         <div class="section">Section Two sub page one</div>
         <div class="section">Section Two sub page two</div>
    <div class="section">Section Three</div>
    <div class="section">Section Four</div>
</div>

<ul id="myMenu">
    <li data-menuanchor="firstPage" class="active"><a href="#page1">First section</a></li>
    <li data-menuanchor="secondPage"><a href="#page2">Second section</a></li>
    <li data-menuanchor="thirdPage"><a href="#page3">Third section</a></li>
    <li data-menuanchor="fourthPage"><a href="#page4">Fourth section</a></li>
</ul>



$('#fullpage').fullpage({
  anchors: ['page1', 'page2', 'page3', 'page4'],
  sectionsColor: ['yellow', 'orange', '#C0C0C0', '#ADD8E6'],
  menu: '#myMenu'
});

Answer 1

管理让它发挥作用。工作代码。 http://codepen.io/anon/pen/JRJOkb

<div id="fullpage">
    <div class="section" data-anchor="one">Section One</div>
    <div class="section" data-anchor="two">Section Two</div>
         <div class="section">Section Two sub page one</div>
         <div class="section">Section Two sub page two</div>
    <div class="section" data-anchor="three">Section Three</div>
    <div class="section" data-anchor="four">Section Four</div>
</div>

<ul id="myMenu">
    <li data-menuanchor="firstPage" class="active"><a href="#one">First section</a></li>
    <li data-menuanchor="secondPage"><a href="#two">Second section</a></li>
    <li data-menuanchor="thirdPage"><a href="#three">Third section</a></li>
    <li data-menuanchor="fourthPage"><a href="#four">Fourth section</a></li>
</ul>

$('#fullpage').fullpage({
  anchors: ['one', 'two', 'a1','a2','three', 'four'],
  sectionsColor: ['yellow', 'orange',  'orange', 'orange','#C0C0C0', '#ADD8E6'],
  menu: '#myMenu'
});

使用fullpage.js脚本的子部分页面

1 个答案: