I'm using the fabulous fullpage.js to make a single page website.

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 (i.e. just a standard <a href> link). I've been messing around with anchors but can't get it to work.

I'm using the fabulous fullpage.js to make a single page website.

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 (i.e. just a standard <a href> link). I've been messing around with anchors but can't get it to work.

• javascript
• jquery
• html
• fullpage.js

• Did what was listed here not work for you? github.com/alvarotrigo/fullPage.js#using-anchor-links – mituw16 Commented Apr 17, 2014 at 14:35
• If I add data-anchor="last-section" to #section2 and then add <a href="#last-section">click me</a> in #section1's content, the link does nothing... – Garry Pettet Commented Apr 17, 2014 at 14:39
• @Alvaro 's answer is solves my issue. – Zotov Egor Commented Aug 29, 2017 at 5:42

1 Answer 1

You only need to use the anchors option and then use normal links:

$('#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. For example:

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