使用fullpage.js时，如何通过按钮跳转至指定页面？

嘿，刚好我对fullpage.js的跳转逻辑很熟，来给你梳理下怎么实现按钮跳转到指定section，还有按钮类型的选择建议！

一、选哪种按钮？ #

其实普通的<button>标签或者<a>标签都能用，看你的习惯场景：

• 用<button>更语义化，毕竟是触发页面滚动的交互操作，不是跳转外部链接；
• 用<a>的话，就算JS没加载完成，还能做个锚点降级（不过fullpage会接管滚动逻辑，这个看你有没有兜底需求）。
  我个人更推荐<button>，贴合交互场景。

二、具体实现步骤 #

1. 给Sections做定位标记 #

fullpage.js支持两种定位方式，选一种就行：

<!-- 方式1：用data-anchor（fullpage官方推荐，适合URL哈希同步） -->
<div id="fullpage">
  <div class="section" data-anchor="home">首页</div>
  <div class="section" data-anchor="about">关于我们</div>
  <div class="section" data-anchor="contact">联系我们</div>
</div>

<!-- 方式2：用ID（更通用，不用额外记fullpage的属性） -->
<div id="fullpage">
  <div class="section" id="home">首页</div>
  <div class="section" id="about">关于我们</div>
  <div class="section" id="contact">联系我们</div>
</div>

2. 编写按钮HTML结构 #

给按钮加上识别标记，方便后续绑定事件：

<!-- 固定在页面角落的跳转按钮 -->
<div style="position: fixed; top: 30px; right: 30px; z-index: 999;">
  <button class="fp-jump-btn" data-target="home">回到首页</button>
  <button class="fp-jump-btn" data-target="about">查看关于</button>
  <button class="fp-jump-btn" data-target="contact">联系我们</button>
</div>

3. 用fullpage的API实现跳转 #

fullpage初始化后会暴露全局的fullpage_api对象，调用它的moveTo方法就能完成跳转，有两种绑定方式：

方式A：直接绑定onclick（简单快捷，适合少量按钮）

<button onclick="fullpage_api.moveTo('home')">回到首页</button>
<button onclick="fullpage_api.moveTo('about')">查看关于</button>
<button onclick="fullpage_api.moveTo('contact')">联系我们</button>

moveTo的参数可以是section的data-anchor值、ID，或者section的索引（从1开始，比如moveTo(1)就是跳转到第一个section）。

方式B：事件委托绑定（优雅，适合多按钮场景）

如果按钮很多，用事件委托避免重复代码：

// 等待页面加载完成
document.addEventListener('DOMContentLoaded', function() {
  // 先初始化fullpage
  new fullpage('#fullpage', {
    // 你的自定义配置，比如：
    navigation: true,
    scrollingSpeed: 700
  });

  // 给按钮绑定点击事件
  document.addEventListener('click', function(e) {
    if (e.target.classList.contains('fp-jump-btn')) {
      const targetSection = e.target.getAttribute('data-target');
      fullpage_api.moveTo(targetSection);
    }
  });
});

4. 额外小技巧 #

• 如果section里有幻灯片（slides），可以用moveTo(section标记, slide索引)跳转到指定幻灯片，比如moveTo('about', 1)就是跳转到「关于我们」的第二个幻灯片；
• 可以给按钮加个active状态，比如当前在哪个section，对应的按钮高亮，提升用户体验；
• 确保fullpage已经初始化完成再调用fullpage_api，不然会报错。

三、完整示例代码 #

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/4.0.20/fullpage.min.css">
  <style>
    .fp-jump-btn {
      margin: 0 5px;
      padding: 8px 16px;
      cursor: pointer;
    }
  </style>
</head>
<body>
  <!-- 跳转按钮 -->
  <div style="position: fixed; top: 30px; right: 30px; z-index: 999;">
    <button class="fp-jump-btn" data-target="home">首页</button>
    <button class="fp-jump-btn" data-target="about">关于</button>
    <button class="fp-jump-btn" data-target="contact">联系</button>
  </div>

  <!-- fullpage容器 -->
  <div id="fullpage">
    <div class="section" data-anchor="home">
      <h1>这是首页内容</h1>
    </div>
    <div class="section" data-anchor="about">
      <h1>这是关于我们的内容</h1>
    </div>
    <div class="section" data-anchor="contact">
      <h1>这是联系我们的内容</h1>
    </div>
  </div>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/4.0.20/fullpage.min.js"></script>
  <script>
    // 初始化fullpage
    new fullpage('#fullpage', {
      navigation: true,
      scrollingSpeed: 700
    });

    // 绑定按钮跳转事件
    document.addEventListener('click', function(e) {
      if (e.target.classList.contains('fp-jump-btn')) {
        fullpage_api.moveTo(e.target.dataset.target);
      }
    });
  </script>
</body>
</html>

内容的提问来源于stack exchange，提问作者mathieu