Browser back button does not work for Anchor links

Question

In the footer of my page there a few links that point to different sections on the same page using anchor tags (# appended to the URL of the page).

This works fine, just the browser back button does not work: I cannot move back to the previous page from where I had navigated to the anchored page.

The simple question here is, is it possible to move back to previous page after navigating in the anchored page a few times? If it is then please could you suggest how?

Anchored page: the page that has several sections marked by the id attribute that can be pointed to by a URL with #anchorId at the end.

Answer 1

History and the Back Button.

In days of old, the back button did little more that go to the previous item in the browser's history. That's changed quite a bit since then, as it keeps its own history according to a somewhat simple set of rules. Good luck digging through standards docs to find it though.

UI/UX and why NOT to change expected behaviors.

Please reference w3c's 'don't brek the back-button before you go making changes to a browser's default behavior. Its like that for a reason, following mountains of debate and defining standards.

Ultimately, this is what browsers do, and so this is what the users expect. If you begin to subvert the behavior away from user's expectations, you're likely to start pissing off your users. When buttons and links repeatedly don't behave as expected, users will often just give up and leave your site.

Prevent Default.

If you really must alter the default behavior, the using javascript would be the best way to do it:

<a href="#id" onclick="return gotoAnchor(this);">

<script>
function gotoAnchor(elm) {
    window.event.returnValue = false;
    var url = location.href;

    location.href = elm.href;
    history.replaceState(null,null,url);

    return false;
}
</script>