javascript - 如何使用完整 page.js 滚动到带有链接的特定部分？

Question

我正在使用美妙的fullpage.js来制作单页网站。

这是基本代码：

<div id="fullpage">
    <div class="section" id="section0">
        <h1>Page 0</h1>
        <p>Some text 0</p>      
    </div>
    <div class="section" id="section1">
        <h1>Page 1</h1>
        <p>Some text 1</p>      
    </div>
    <div class="section" id="section2">
        <h1>Page 2</h1>
        <p>Some text 2</p>      
    </div>
</div>

我想不通的是如何在第 0 节到第 2 节中包含一个链接（即只是一个标准<a href>链接）。我一直在搞乱锚，但无法让它工作。

Answer 1

您只需要使用该anchors选项，然后使用普通链接：

$('#fullpage').fullpage({
    anchors: ['section1', 'section2', 'section3', 'section4']
});

链接应该看起来正常，但前缀 bye #：

<a href="#section3">Link to section 3</a>

活生生的例子

您的网址将如下所示：

http://yoursite.com/#section1
http://yoursite.com/#section2
http://yoursite.com/#section3
http://yoursite.com/#section4

现在还可以data-anchor="section1"在每个部分中使用 html 属性来为其定义锚点。例如：

<div id="fullpage">
    <div class="section" data-anchor="section1">Section 1</div>
    <div class="section" data-anchor="section2">Section 1</div>
</div>