Why Does Clicking an Anchor Tag Reload the Page?

Clicking an anchor tag can reload a page because a normal link performs browser navigation: it requests the destination URL, and the browser may fetch and render a new document. Even when the destination is the same page, a changed URL, server response, redirect, or client-side setup can make that navigation look like a reload.

What an anchor click tells the browser

An anchor is a link, usually written with an <a> element and an href attribute. For example, <a href="/about">About</a> tells the browser that activating the link should navigate to /about. Navigation is the default behavior; it does not require JavaScript.

The browser resolves the address against the current page, then follows the resulting URL. If it points to another document, the browser requests that resource and displays it. This may appear instantaneous if the response comes from cache, but it is still navigation. The browser can also update history, run page lifecycle events, and scroll to a location as part of handling the link.

Same-page links and fragments

A link such as <a href="#details">Details</a> targets an element whose ID is details. This is a fragment navigation. When the target exists in the current document, browsers normally move the viewport to it and update the URL fragment without requesting a new copy of the document from the server.

However, several details can make this feel like a reload:

• If the link is href="#", it targets the empty fragment at the top of the current page. The URL may gain a trailing hash, and the browser may scroll to the top.
• If the fragment names no element, the URL can still change even though there is no visible destination to scroll to.
• If JavaScript listens for the click and changes the page or calls a navigation method, the result may be more substantial than ordinary fragment scrolling.
• If the link resolves to a different path, host, or document, it is not merely an in-page jump, even if the new page looks identical.

A hash change by itself is not proof that the document was reloaded. Check whether the page’s JavaScript state resets, whether a new document request occurs, and whether the browser’s loading indicator or developer tools show a navigation.

Why a link can point back to the same page

Links that appear to mean “do nothing” often still have a destination. For example, href="/products" can reload the current products page if the current URL is already /products. Likewise, href="https://example.test/page" navigates to that full address even if it matches the page currently open.

Relative URLs can also resolve differently than expected. A link with href="page" is interpreted relative to the current URL path; it is not necessarily the same as href="/page", which starts at the site’s root. A trailing slash, query string, capitalization, or different hostname can produce a distinct URL. The server may then redirect it to a preferred address, adding another navigation step.

In a single-page application, client-side routing code may intercept some links and update the view without fetching a whole document. But ordinary anchors still have browser navigation behavior unless the application handles the click. A route the app does not recognize, a modified click, or a link opened in a new tab may follow normal browser behavior instead.

Common causes in HTML and JavaScript

Inspect the actual rendered link, not just the source template. The browser’s developer tools can reveal whether a framework or script has changed its attributes. Common causes include:

• A real destination: The href names a route or document, so the browser navigates there.
• A placeholder link: href="#" or an empty-looking URL triggers default link behavior, often changing the fragment or scrolling.
• A form interaction: A link may sit next to a form, but a button inside a form can submit it by default if it is a submit button. That submission can reload or navigate the page; it is not caused by the anchor itself.
• Scripted navigation: An event handler may set location.href, call location.assign(), or submit a form.
• Server redirects: The requested address may redirect to another URL, such as a canonical path or a login page.

Also check whether a click handler runs more than once, whether a parent element has its own click handler, and whether the link is nested in unusual interactive markup. These can make the observed action differ from what the anchor alone suggests.

How to diagnose the reload

Start with the link’s final href in the browser inspector. Compare it with the full address in the address bar, including the path, query string, fragment, and hostname. Then try these checks:

1. Open the browser’s Network panel, enable “Preserve log” if available, and click the link. Look for a document request and any redirects.
2. Check the Console for errors and inspect click handlers on the anchor and its ancestors.
3. Temporarily disable the relevant JavaScript, if practical. If the behavior changes, the application code is involved; if it remains, normal link navigation may explain it.
4. Test the link with keyboard activation as well as a pointer. A properly implemented anchor should work for keyboard users too.

A full document request is strong evidence of navigation, but cache can make the request hard to notice or allow it to complete quickly. Conversely, a new hash in the address bar can happen without a full reload.

Choosing the right fix

Use an anchor when the user should go somewhere: another page, a section identified by a fragment, an email address, or another valid destination. Give it a meaningful destination rather than using a fake URL merely to make text look clickable.

If the control performs an action without navigation—such as opening a dialog, expanding a disclosure, or changing a local setting—use a <button>. Buttons express actions, while anchors express navigation. This distinction improves keyboard behavior and gives assistive technology a more accurate control type.

If a link should navigate within a single-page application, use the framework’s documented routing link where appropriate, and ensure it still has a meaningful destination. Avoid adding preventDefault() to every anchor as a blanket fix: it can break normal navigation, opening links in a new tab, copying link addresses, and keyboard or assistive-technology expectations. Prevent the default only when the interaction genuinely replaces the link’s navigation and provide an accessible alternative.

Frequently Asked Questions

Does href="#" reload the page?
Usually it does not request a fresh document by itself. It can change the URL fragment and scroll to the top, which may look like a reload. JavaScript or other page behavior can change the outcome.

Why does a link to the current page reload it?
A normal anchor still requests navigation to its destination, even if that destination resolves to the page already open. The browser or server may reuse cached content, but the link’s default action remains navigation.

Does clicking a hash link send a request to the server?
For a fragment that targets the current document, browsers generally scroll within the document and update the fragment without requesting another document. A hash link that also changes the path or other URL components can cause navigation.

How can I stop a link from reloading the page?
First decide whether it is navigation or an action. Use a button for an action. If an anchor is intentionally handled by JavaScript, intercept only that specific interaction and preserve accessible, expected behavior.

Why does my single-page app reload when I click a link?
The link may not be intercepted by the router, may point outside the app’s handled routes, or may be activated in a way that requests normal browser navigation. Check its resolved URL, router configuration, and the Network panel.

Related

• How to Choose a Racing Game on Steam: Sim, Rally or Track
• AGI Meaning: How It Differs From Today’s AI
• Best Christmas Gifts for Every Gamer: What to Buy