One out of 2 buttons initiate scroll but both of them are supposed to

i have a long page with one button at tope and one button at the bottom , i made the first button scroll me to a div tag at the botton like this

 <button onClick="document.getElementById('middle').scrollIntoView();" >

 <b>
    Learn More.
 </b>
 </button>`

But the second button with the same code but the middle changed to top doesnt work

    <button onClick="document.getElementById('top').scrollIntoView();" , class = 'goback ' >

    <b>
        Go Back Up
    </b>
    </button>

and i donot have any solution for this , am i missing something silly?

Answer

I think this would be better if you didn’t use Javascript as some users disable it entirely when visiting websites.

Wrap an <a> tag around your buttons and use the href attribute instead.

section {
  height: 70vh;
  border: 1px solid black;
}

<section id="first-section">
  <a href="#second-section"><button>Go to second section</button></a>
</section>
<section id="second-section">
  <a href="#first-section"><button>Go to first section</button></a>
</section>