fullpage.js how to create slide anchors and scroll to them?

问题

Using fullpage.js, how can I create anchors for slides as oppose to section anchors that are defined in the options.anchors?

The documentation says to use data-anchors but its not doing anything with the following setup. The <a> links just works normally by jumping to the <div> with the id and there is no scrolling.

$(document).ready(function() {
    $('#fullpage').fullpage(); // initialization
});

<div id="fullpage">
    <div class="section">
        <div id="slide1" class="slide" data-anchor="slide1">slide1</div>
        <div id="slide2" class="slide" data-anchor="slide2">slide2</div>
    </div>
    <div class="section">
        <div id="slide3" class="slide" data-anchor="slide3">slide3</div>
        <div id="slide4" class="slide" data-anchor="slide4">slide4</div>
    </div>
</div>

<ul id="main-navi">
    <li><a href="#slide1">slide1</a></li>
    <li><a href="#slide2">slide2</a></li>
    <li><a href="#slide3">slide3</a></li>
    <li><a href="#slide4">slide4</a></li>
</ul>

回答1:

It is not explained for the data-anchors section in the documentation, but it is explained for the anchors option.

Documentation says:

anchors: (default []) Defines the anchor links (#example) to be shown on the URL for each section. Using anchors forward and backward navigation will also be possible through the browser. This option also allows users to bookmark a specific section or slide. Be careful! if you use anchors, they can not have the same value as any ID element on the site (or NAME element for IE).

You are applying the same value for your data-anchorattribute than for the id tag. That's the reason why it is failing and scrolling with no animation. Some browsers automatically scroll to elements with the same id or nameattribute than the hashtag in the URL (#).

Just choose another value for your data-anchor attributes or change the id for each slide.

回答2:

I know the topic is already 2 years old yet I faced the very same problem today and stumbled upon this article. Now that I´ve found a solution I thought it would be nice to share it with you guys!

<div class="wrap">
    <nav class="nav">
        <ul>
            <li><a class="nav__item active" href="#">1</a></li>
            <li><a class="nav__item" href="#">2</a></li>
            <li><a class="nav__item" href="#">3</a></li>
            <li><a class="nav__item" href="#">4</a></li>
        </ul>
    </nav>
</div>

<div id="fullpage">
    <div class="section">
      <div class="slide"></div>
      <div class="slide"></div>
      <div class="slide"></div>
      <div class="slide"></div>
    </div>
</div>

Don´t forget to add the active class to the first anchor.

And for .js I just used what already comes along with the FullPage.js

$('#fullpage').fullpage({
    afterSlideLoad: function( anchorLink, index, slideAnchor, slideIndex){
      $('.nav__item.active').removeClass('active');
      $('.nav__item').eq(slideIndex).addClass('active');
    }
});

And that´s it! Now you have your very own slide navigation ;-)

Edit:

I guess I have misread the problem above but this also can be fixed:

<div class="wrap">
    <nav class="nav">
        <ul>
            <li><a class="nav__item active" href="#firstPage/slide1">1</a></li>
            <li><a class="nav__item" href="#firstPage/slide2">2</a></li>
            <li><a class="nav__item" href="#firstPage/slide3">3</a></li>
            <li><a class="nav__item" href="#firstPage/slide4">4</a></li>
        </ul>
    </nav>
</div>

<div id="fullpage">
    <div class="section">
      <div class="slide" data-anchor="slide1"></div>
      <div class="slide" data-anchor="slide2"></div>
      <div class="slide" data-anchor="slide3"></div>
      <div class="slide" data-anchor="slide4"></div>
    </div>
</div>

 $('#fullpage').fullpage({
    anchors: ['firstPage', 'secondPage', thirdPage'],
    afterSlideLoad: function( anchorLink, index, slideAnchor, slideIndex){
      $('.nav__item.active').removeClass('active');
      $('.nav__item').eq(slideIndex).addClass('active');
    }
});

I just added an array of anchors (you can also read this up in the FullPage.js

I don´t know if this is the cleanest solution but it works ;)

来源：https://stackoverflow.com/questions/23156311/fullpage-js-how-to-create-slide-anchors-and-scroll-to-them

标签

jquery

jquery-plugins

fullpage.js