Browser back button history includes anchor clicks

[zshn25]

Is there a way to make the browser not register anchor clicks? I want the user to click back button (after clicking on an anchor) and not go back to when they clicked the anchor but to the previous page.

[allejo]

This would have to be something you do via JS. The concept would be to intercept any clicks on the anchors, and manage updating the URL yourself in a way that doesn't trigger the history functionality.

Here's an example of how you can achieve that behavior,

<style>
    .heading {
        margin-bottom: 90vh;
    }
</style>

<ul>
    <li><a href="#section-1">Section 1</a></li>
    <li><a href="#section-2">Section 2</a></li>
    <li><a href="#section-3">Section 3</a></li>
    <li><a href="#section-4">Section 4</a></li>
</ul>

<h1 class="heading" id="section-1">Section 1</h1>
<h1 class="heading" id="section-2">Section 2</h1>
<h1 class="heading" id="section-3">Section 3</h1>
<h1 class="heading" id="section-4">Section 4</h1>

<script>
    document.querySelectorAll('a').forEach(el => {
        el.addEventListener('click', event => {
            event.preventDefault();

            const hash = el.getAttribute('href');
            window.location.replace(('' + window.location).split('#')[0] + hash);
        })
    })
</script>

⚠️ This isn't something you can copy/paste into your site

[zshn25]

Sorry but this doesn't work for my site. The above code was put here.

[allejo]

See my pull request to your repo, zshn25/zshn25.github.io#2. This was meant more of a demonstration purpose of how it'd be achieved rather than a "copy and paste" solution.

[zshn25]

That works. Thanks a lot. Sorry, I'm a noob in JS, never used before.