I have a card elements on my website. The card has a custom length containing various sized photos and comments and there is a submit button at the bottom.The whole thing looks like this:

There is a problem of the user returning to the same place after reloading the page (after press button submit). If it sends it to a specific ID, it might look like it has come back elsewhere. Below is another card, above is another one. Is there any simple way of using JS or jQuery to get the user back to the same place (exactly the same)? For example by saving down its height from the top and loading it when the user comes back for responses from the server?

The HTML code looks like this:

<!-- loop for card in cards -->
<div class="card" id="{{ card.id }}">
  <img id="img">
  <div id="comments"></div>
  <form method="POST">
    {% csrf_token %}
    <button type="submit">I Like this topic</button>
  </form>
</div>