使用部分 ID 设置自动 Fullpage.js 锚点

Question

我想自动设置 fullpage.js 的锚点数组。我想将其粘贴到我的 WordPress 主题中，但我的功能有问题。你有想法吗？谢谢你的帮助。

HTML

<div id="fullpage">
    <div class="section" id="page-section-1"></div> 
   <div class="section" id="page-section-2"></div>  
   <div class="section" id="page-section-3"></div>  
   <div class="section" id="page-section-4"></div>  
</div>

JS

function getAnchorarray() {
 var idarray = $("#fullpage")
     .find(".section")
     .map(function () {
         return this.id;
     }) 
     .get(); //ToArray
}

$('#fullpage').fullpage({
 navigation: false,
 scrollBar: true,
 menu: '.main-nav',
 //anchors: ["page-section-1", "page-section-2", "page-section-3", "page-section-4"],
 anchors: getAnchorarray(),
 responsiveWidth: 400
});

Answer 1

只需使用 data-anchor 属性 :) 详尽in the docs:

Note that section anchors can also be defined in the same way, by using the data-anchor attribute, if no anchors array is provided.

<div class="section">
    <div class="slide" data-anchor="slide1"> Slide 1 </div>
    <div class="slide" data-anchor="slide2"> Slide 2 </div>
    <div class="slide" data-anchor="slide3"> Slide 3 </div>
    <div class="slide" data-anchor="slide4"> Slide 4 </div>
</div>

使用部分 ID 设置自动 Fullpage.js 锚点

Set automatic Fullpage.js anchors with Section ID

javascript

wordpress

jquery

fullpage.js