如何在href链接上使用js参数和锚点（同一页面）

Question

Every time I click an <a> element with an anchor AND a JavaScript parameter, the URL doesn't change, the page just leads me to the anchor element. For example, when I'm on "website.com" and I click this hyperlink:

<a href="website.com/?par=123#anchor">TEST</a>

The page will scroll to the #anchor element but the URL will still be "website.com", so the JS parameter doesn't get any value. I tried to replace the code with this:

<a href="website.com/?par=123#anchor" onclick="window.location.reload(true)">

And the page reloads, but it only reloads after scrolling to the #anchor element and it still keeps on "website.com", so no success.

Answer 1

This is the whole purpose of URL hashes . It was initially designed to scroll to a particular id in the DOM and was also used by some SPA (Single Page Application) frameworks before the History API existed, as a solution to represent a JavaScript state in the URL.

As it represents a state of the web page in the browser , it's never sent to the server so the browser doesn't send the request again when it changes because the current URL (and thus the server-side resource) is considered unchanged.

If you want to execute JavaScript code in reaction to the hash change event, you can do like this:

 window.addEventListener('hashchange', () => console.log(window.location.hash));

 <a href="#foo">Foo</a> <a href="#bar">Bar</a>

Answer 2

You can use par='123#anchor' instead par=123#anchor like this code and it works.

   <a href="website.com/?par='123#anchor'">TEST</a>