How to stop page from scrolling up whenever a button is clicked?

I need help with this issue that I can't solve or find anything online about it, so please help.

I'm making a website and I have a profile page where the user can see their personal data, and it is devided in 3 sections. In each section I have put a "edit" button for user to edit their data if they want to (yes making one "edit" button for the data in the whole page would be great ofc but I had difficulty with that so I'm doing it like this for now).

The problem is: when you scroll down in this page and you click on "edit" the page sort of reload and it scrolls all the way up. So you have to scroll back down again to edit your data and then when you're done and you click on "update" the same thing happens with the page so you gotta scroll back down again.

It's really frustrating so if you have any tips or a resources that can help me, PLEASE LET ME KNOW!

Solution

If I understand, you need this:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <form id="form1" action="index.html#form1">
      <h1>Form 1</h1>
      <textarea rows="20"></textarea>
      <input type="submit" value="update" />
    </form>
    <form id="form2" action="index.html#form2">
      <h1>Form 2</h1>
      <textarea rows="20"></textarea>
      <input type="submit" value="update" />
    </form>
    <form id="form3" action="index.html#form3">
      <h1>Form 3</h1>
      <textarea rows="20"></textarea>
      <input type="submit" value="update" />
    </form>
  </body>
</html>

Change index.html to path where you handle your post submit.