如何在Framework7应用内创建页面内锚点链接？

在Framework7中，默认会拦截所有<a>标签的点击事件，用于处理应用内的路由跳转，这就是经典锚点（href="#id"）失效的核心原因。以下是几种可行的解决方式：

方法一：添加external类绕过Framework7路由拦截 #

给锚点链接添加class="external"，让浏览器按原生逻辑处理锚点跳转，最简单直接：

<div class="main" id="section1">
  <h2>Section 1</h2>
  <p>Click on the link to jump to section 2.</p>
  <a href="#section2" class="external">Click Me</a>
</div>

<div class="main" id="section2">
  <h2>Section 2</h2>
  <p>Click on the link to jump to section 1.</p>
  <a href="#section1" class="external">Click Me</a>
</div>

方法二：使用Framework7内置滚动API实现跳转 #

通过Framework7的scroll.scrollTo方法手动控制滚动，适合需要自定义动画或额外业务逻辑的场景：

<div class="main" id="section1">
  <h2>Section 1</h2>
  <p>Click on the link to jump to section 2.</p>
  <a href="#" onclick="jumpToSection('section2')">Click Me</a>
</div>

<div class="main" id="section2">
  <h2>Section 2</h2>
  <p>Click on the link to jump to section 1.</p>
  <a href="#" onclick="jumpToSection('section1')">Click Me</a>
</div>

<script>
  const app = new Framework7();

  function jumpToSection(targetId) {
    const targetEl = document.getElementById(targetId);
    // 第二个参数控制是否启用平滑滚动动画
    app.scroll.scrollTo(targetEl, true);
  }
</script>

方法三：利用原生scrollIntoView方法 #

如果滚动容器是Framework7的.page-content，直接调用元素的原生scrollIntoView方法也能实现：

<div class="page-content">
  <div class="main" id="section1">
    <h2>Section 1</h2>
    <p>Click on the link to jump to section 2.</p>
    <a href="#" onclick="document.getElementById('section2').scrollIntoView({behavior: 'smooth'})">Click Me</a>
  </div>

  <div class="main" id="section2">
    <h2>Section 2</h2>
    <p>Click on the link to jump to section 1.</p>
    <a href="#" onclick="document.getElementById('section1').scrollIntoView({behavior: 'smooth'})">Click Me</a>
  </div>
</div>

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