How to go to a specific section with a link using full page.js?

I use the fabulous fullpage.js to create a one page website.

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

I cannot figure out how to include the link in section 0 in section 2 (i.e. only the standard link <a href>). I was busy with anchors, but I canโ€™t get it to work.

+4
source share
1 answer

You only need to use the parameter anchorsand then use regular links:

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

The link should look fine, but the prefix is โ€‹โ€‹bye #:

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

Real time example

Your urls will look like this:

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

html data-anchor="section1" , . :

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

Source: https://habr.com/ru/post/1536963/


All Articles