简体   繁体   English

如何使用完整page.js滚动到包含链接的特定部分?

[英]How do I scroll to a specific section with a link using full page.js?

I'm using the fabulous fullpage.js to make a single page website. 我正在使用神话般的fullpage.js制作单页网站。

Here's the basic code: 这是基本代码:

<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>

What I can't figure out is how to include a link in section 0 to section 2 (ie just a standard <a href> link). 我无法弄清楚的是如何在第0节到第2节中包含一个链接(即只是一个标准的<a href>链接)。 I've been messing around with anchors but can't get it to work. 我一直在搞乱锚,但无法让它发挥作用。

You only need to use the anchors option and then use normal links: 您只需要使用anchors选项,然后使用普通链接:

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

The link should look normally, but prefixed bye # : 该链接应该看起来正常,但前缀为#

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

Live example 实例

Your URLs will look like: 您的网址将如下所示:

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

Now it is also possible to use the html attribute data-anchor="section1" in each section in order to define the anchor for it. 现在,也可以在每个部分中使用html属性data-anchor="section1" ,以便为其定义锚点。 For example: 例如:

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

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM