需要在 html 锚点上单击两次到 go 到 id 或名称

Question

I have this little problem happen on firefox (works fine on chrome), i have list of buttons that have anchor with different in page destination, im using id, but (on firefox) the anchor only work on second click, the first click only change the URL.

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

destination

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

ive also already try name="" but its still need double clikc to work, is there method to resolve this or is it a bug on firefox?

Answer 1

Try this:

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

Destination:

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

Answer 2

I can verify the issue exists in Firefox and Safari. This can be solved without JS by configuring your router's scrollBehavior as mentioned in the docs ( Router v3 | Router v4 ):

A solution would look like this for Router V3:

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

Or for Router V4:

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