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

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>