fullpage.js如何创建滑动锚并滚动到它们? [英] fullpage.js how to create slide anchors and scroll to them?

问题描述

使用 fullpage.js ，如何针对幻灯片创建锚点在options.anchors中定义的锚点?

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

文档说要使用数据锚，但是在以下设置中它什么也没做.通过跳转到具有ID的<div>并且没有滚动，<a>链接可以正常工作.

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>

推荐答案

在文档的data-anchors部分中没有对此进行解释，但在anchors选项中对其进行了解释.

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

文档说:

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

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

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 (#).

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

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

这篇关于fullpage.js如何创建滑动锚并滚动到它们?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！