CODEWITHSUNDEEP
html
orlando21
orlando21

Reputation: 307

How to prevent page reload when clicking on an anchor tag with link within page?

I'm using a HTML anchor tag for a "back to top" link in the footer of my web page:

<a href="#top" class="footer__top">Back to top</a>

At the top of the page I inserted another anchor tag in <HEAD>:

<a id="#top"></a>

Clicking on the footer anchor link causes the page to scroll up as intended, but is there a way to simply scroll to top (using HTML) without refreshing the page?

For context, search results are being displayed so when the page refreshes, the results are lost.

I found a possible solution using Javascript (see below - it scrolls to top without refreshing the page) but this causes other issues for me (search input field becomes frozen and user cannot enter more terms), so I'm asking whether there's a solution using HTML:

  $("a[href='#top']").click(function() {
      $("html, body").animate({ scrollTop: 0 }, "fast");
      return false;
  });

Upvotes: 1

Views: 2223

Answers (1)

Hiral
Hiral

Reputation: 129

If you want to scroll to top of the page(your div is on top) You can use below Javascript syntax to achieve this.

window.scrollto(0,0) // (0,0) being the location

Upvotes: 1

Related Questions