fullpage.js 如何创建幻灯片锚点并滚动到它们？答案

【问题标题】：fullpage.js how to create slide anchors and scroll to them?fullpage.js 如何创建幻灯片锚点并滚动到它们？
【发布时间】：2014-06-03 02:13:14
【问题描述】：

使用fullpage.js，如何为幻灯片创建锚点，而不是在 options.anchors 中定义的部分锚点？

文档说要使用数据锚，但它对以下设置没有做任何事情。 <a> 链接只是通过跳转到带有 id 的 <div> 正常工作，并且没有滚动。

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

【问题讨论】：

标签： jquery jquery-plugins fullpage.js

【解决方案1】：

文档中没有对data-anchors 部分进行解释，但对anchors 选项进行了解释。

文档说：

anchors：（默认 []）定义要在每个部分的 URL 上显示的锚链接（#example）。也可以通过浏览器使用锚点向前和向后导航。此选项还允许用户为特定部分或幻灯片添加书签。 小心！如果您使用锚点，它们的值不能与网站上的任何 ID 元素（或 IE 的 NAME 元素）具有相同的值。

您为data-anchorattribute 应用了与id 标记相同的值。这就是为什么它失败并且没有动画滚动的原因。某些浏览器会自动滚动到与 URL (#) 中的主题标签具有相同 id 或 name 属性的元素。

只需为您的data-anchor 属性选择另一个值或更改每张幻灯片的id。

【讨论】：

我认为答案是 fullpage.js 不支持到幻灯片的直接锚链接。经过大量的尝试和错误，我终于弄清楚URL必须是domain/#section/slide的形式，你不能有domain/#slide。
@Jake，fullpage.js 支持它们，但你做错了。当然，你必须在它之前指定部分名称，否则在使用默认锚链接（1、2...）的情况下，不同部分的幻灯片之间可能会发生冲突。无论如何，正如我所说，您的问题在于使用与您的anchorlink 具有相同值的id 标签。
是的，这就是我所说的，它不支持 domain/#slide，这让我很失望。即使没有 id，我也无法让它工作，这是我已经知道的要求 (+1)。

【解决方案2】：

我知道这个话题已经 2 岁了，但我今天遇到了同样的问题，偶然发现了这篇文章。现在我找到了一个解决方案，我认为很高兴与你们分享！

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

不要忘记将活动类添加到第一个锚点。

对于 .js，我只是使用了 FullPage.js 中已有的内容

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

就是这样！现在您有了自己的幻灯片导航；-)

编辑：

我想我误读了上面的问题，但这也可以解决：

<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');
    }
});

我刚刚添加了一组锚点（您也可以在 FullPage.js 中阅读此内容

我不知道这是否是最干净的解决方案，但它有效；）

【讨论】：