需要在 html 锚上点击两次才能转到 id 或 name

Question

我在 firefox 上遇到了这个小问题（在 chrome 上工作正常），我有一个按钮列表，这些按钮在页面目标中具有不同的锚点，我使用的是 id，但是（在 firefox 上）只有锚点第二次点击工作，第一次点击只改变 URL.

<a href="#section1">button 1</a>
<a href="#section2">button 2</a>

目的地

<section id="section1">
some content
</section>
<section id="section2">
some content
</section>

我也已经尝试过 name="" 但它仍然需要双击才能工作，有没有解决这个问题的方法或者它是 firefox 上的错误？

Answer 1

试试这个：

<a href="javascript:document.getElementById('section1').scrollIntoView(true);">
    Button 1
</a>
<a href="javascript:document.getElementById('section2').scrollIntoView(true);">
    Button 2
</a>

目的地：

<section id="section1">
    some content
</section>
<section id="section2">
    some content
</section>

Answer 2

我可以验证 Firefox 和 Safari 中是否存在该问题。这可以在没有 JS 的情况下通过配置路由器的 scrollBehavior 来解决，如文档中所述 (Router v3 | Router v4):

路由器 V3 的解决方案如下所示：

  scrollBehavior(to, from, savedPosition) {
    if (to.hash) {
      return { selector: to.hash };
    } 
  }

或路由器 V4：

  scrollBehavior(to, from, savedPosition) {
    if (to.hash) {
      return { el: to.hash };
    }
  }

需要在 html 锚上点击两次才能转到 id 或 name

need clicked twice on html anchor to go to id or name

html

anchor

firefox

vue.js