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

【问题标题】：need clicked twice on html anchor to go to id or name需要在 html 锚点上单击两次才能转到 id 或 name
【发布时间】：2021-07-12 00:24:15
【问题描述】：

我在 firefox 上发生了这个小问题（在 chrome 上工作正常），我有一个按钮列表，这些按钮的锚点在页面目的地不同，我使用 id，但是（在 firefox 上）锚点只在第二次点击时起作用，首先点击只更改网址。

<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 上的错误？

【问题讨论】：

您可以尝试禁用所有插件或以安全模式运行firefox并再次尝试该应用程序。
@HelloPutra 感谢您的回复，试过了，但仍然无法正常工作

标签： html vue.js firefox anchor

【解决方案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>

【讨论】：

它的工作就像一个魅力，实际上我试着不使用javascript，我认为这种动作不需要js，因为它在其他浏览器上工作正常，我使用vue所以我把它移到方法中，感谢您的回答非常有帮助，但我仍然想知道这个错误是 Firefox 上的还是没有哈哈
是的，可能是错误，也可能是功能 xD

【解决方案2】：

我可以确认问题存在于 Firefox 和 Safari 中。这可以在没有 JS 的情况下通过配置您的路由器的 scrollBehavior 来解决，如文档 (Router v3 | Router v4) 中所述：

Router V3 的解决方案如下所示：

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

或者对于路由器 V4：

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

【讨论】：