Some links on this page are affiliate links: if you buy through them we may earn a commission, at no extra cost to you.
To reload the current document and then land on a particular section, put that section’s fragment in the URL before reloading:
history.replaceState(null, "", "#second");
location.reload();Use a matching link and target such as <a href="#second"> and <section id="second">. A normal fragment link scrolls without reloading; a reload preserves the current URL, so the desired fragment must already be there.
Use a real anchor, then intercept its click if a reload is required
Start with native HTML so the destination is identifiable and the link remains keyboard-accessible:
The Tool Desk
Outbyte PC Repair FREEClear out junk files and repair common Windows errorsFree Scan →Outbyte Driver Updater FREEFix the driver behind crashes, sound loss and screen glitchesFind Drivers →<a href="#second" class="reload-to-anchor">Go to the second section</a>
<section id="first">First section</section>
<section id="second">Second section</section>For a page where the link should reload the same document before navigating to the fragment, use an event listener:
#1 Best Overall
document.addEventListener("click", (event) => {
const link = event.target.closest(".reload-to-anchor");
if (!link) return;
const targetURL = new URL(link.href, document.baseURI);
// Handle only a fragment on this exact document URL.
if (
targetURL.origin !== location.origin ||
targetURL.pathname !== location.pathname ||
targetURL.search !== location.search ||
!targetURL.hash
) {
return;
}
event.preventDefault();
history.replaceState(null, "", targetURL.href);
location.reload();
});replaceState() updates the current same-origin URL without loading it, and location.reload() then reloads that URL with the fragment retained. The fragment identifies a part of the document and is processed by the browser; it is not sent to the server. See History.replaceState(), Location.reload(), and URI fragments.
The URL checks matter if the page also has links to another path, query string, or document. A broad handler that catches every a[href^="#"] can accidentally turn unrelated fragment navigation into a reload. If your use case is narrower, keep the handler scoped to a class or otherwise verify the destination.
Rank #2
- HTML CSS Design and Build Web Sites
- Comes with secure packaging
- It can be a gift option
Why the common attempts behave differently
<a href="#second">does not reload. Changing only the fragment is normally same-document navigation: the browser updates the URL and scrolls within the already-loaded document. It does not request the HTML page again. The HTML Standard’s navigation rules distinguish this from a new-document navigation.location.reload()returns to the current fragment. If the address is/page#first, reloading that URL means the browser restores or targets#first. Set the new fragment first.location.href = "/page#second"usually does not force a reload when only the fragment changes. It is suitable for moving to an anchor, not for fetching the document again.!#secondis not anchor syntax. The fragment delimiter is#, so usehref="#second"and an element withid="second".
Calling location.reload() before changing the fragment is also too late: navigation may begin before the next line can update the URL.
If the target is rendered after the page loads
Native fragment scrolling can happen before an AJAX response or framework render creates the target. In that case, run a scroll fallback after the target exists:
Rank #3
function scrollToCurrentFragment() {
const id = decodeURIComponent(location.hash.slice(1));
if (!id) return;
const target = document.getElementById(id);
if (!target) return;
requestAnimationFrame(() => {
target.scrollIntoView({
behavior: "auto",
block: "start",
inline: "nearest"
});
});
}
document.addEventListener("DOMContentLoaded", scrollToCurrentFragment);scrollIntoView() scrolls ancestor containers to make the element visible. If the target is created later than DOMContentLoaded, call scrollToCurrentFragment() immediately after the rendering or data-loading step that inserts it. A missing or empty fragment has no target to scroll to.
Prefer getElementById() for a fragment-derived ID rather than inserting an arbitrary fragment directly into querySelector(); special characters can make a CSS selector invalid. IDs should be unique in the document.
Rank #4
- Brand: Wiley
- Set of 2 Volumes
- A handy two-book set that uniquely combines related technologies Highly visual format and accessible language makes these books highly effective learning tools Perfect for beginning web designers and front-end developers
When not to reload
A full reload discards in-memory JavaScript state, may reset forms, can cause flicker, and may trigger a form-resubmission warning if the page came from a POST. Use it only when the whole document genuinely needs to be requested or initialized again.
| What you need | Use |
|---|---|
| Scroll to content already on the page | <a href="#id"> |
| Reload the document and retain the selected section | Set the fragment with replaceState(), then call location.reload() |
| Refresh data while keeping page state | Fetch the data and update the relevant section, then scroll to it |
| Load or activate content when the fragment changes | Handle hashchange and also run the handler initially |
| Scroll to a target inserted asynchronously | Call scrollIntoView() after rendering the target |
For a data-only refresh, for example, request the relevant data with fetch(), render the result, and then scroll to the rendered element. This avoids reloading the entire document. If you do use hashchange, note that it does not fire for URL changes made with history.pushState() or history.replaceState(); call your handler directly after using those methods. See the hashchange event documentation.
Common problems
- A sticky header covers the target: add
scroll-margin-topto anchor targets, for example.anchor-target { scroll-margin-top: 5rem; }. - The target is inside a collapsed tab or accordion: open the relevant panel first, then scroll on the next animation frame.
- The target is in an iframe: a parent document’s fragment cannot directly scroll to content inside a separate iframe document. Handle navigation in the iframe or use a deliberate messaging mechanism.
- The page has a
<base>element: relative links resolve against the document base URL. The example usesdocument.baseURIwhen constructing the destination URL. - Reload shows a form-resubmission prompt: consider the Post/Redirect/Get pattern so the resulting page is reached with a GET request.
- Scroll restoration changes the final position: browser history restoration can affect the result. Set
history.scrollRestoration = "manual"only if the application intentionally manages scroll position.
Avoid location.reload(true) as a universal cache-bypass fix. MDN documents the optional cache-bypass argument as supported only in Firefox; fresh data should be addressed through suitable cache headers or an explicit data request, not a non-portable reload flag.
The original question described several attempts to combine anchor navigation and refresh; the key distinction is that fragment navigation and document reload are separate operations. The same distinction explains the behavior without relying on browser-specific tricks. See the SitePoint discussion.
Quick Recap
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
