javascript 如何使用 full page.js 滚动到带有链接的特定部分?

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/23136041/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-28 00:24:07  来源:igfitidea点击:

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

javascriptjqueryhtmlfullpage.js

提问by Garry Pettet

I'm using the fabulous fullpage.jsto make a single page website.

我正在使用出色的fullpage.js制作单页网站。

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.

我想不通的是如何在第 0 节到第 2 节中包含一个链接(即只是一个标准<a href>链接)。我一直在搞乱锚,但无法让它发挥作用。

回答by Alvaro

You only need to use the anchorsoption and then use normal links:

您只需要使用该anchors选项,然后使用普通链接:

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

The link should look normally, but prefixed bye #:

该链接应该看起来正常,但前缀为 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:

现在还可以data-anchor="section1"在每个部分中使用 html 属性来为其定义锚点。例如:

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