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

Question

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.

Did what was listed here not work for you? https://github.com/alvarotrigo/fullPage.js#using-anchor-links — mituw16, Apr 17 '14 at 14:35
If I add `data-anchor="last-section"` to `#section2` and then add `click me` in #section1's content, the link does nothing... — Garry Pettet, Apr 17 '14 at 14:39
@Alvaro 's [answer](https://stackoverflow.com/a/23136819/4497502) is solves my issue. — Zotov Egor, Aug 29 '17 at 05:42

Alvaro · Accepted Answer · 2017-06-15T14:25:33.410

14

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>

edited Jun 15 '17 at 14:25

answered Apr 17 '14 at 15:08

Alvaro

37,936
23
138
304

Perfect. I hadn't realised that the anchors property of the fullpage initialisation referenced the sections in the order that they are defined. Thanks a lot Alvaro. Great script btw. – Garry Pettet Apr 17 '14 at 16:55
That was helpful, however to use anchor links pointing to a particular section, one must use the anchor option while initializing fullpage.js. – Ashesh Jun 23 '15 at 17:11
@Ashesh as its detailed in the answer :) – Alvaro Jun 24 '15 at 09:58
1

For others: Be careful! data-anchor tags can not have the same value as any ID element on the site (or NAME element for IE). – C. Skjerdal Sep 24 '20 at 17:58

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

1 Answers1