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.

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.

• javascript
• jquery
• html
• css

• 2 This is how it is supposed to work, and does in all browsers by default. Users know and expect this behavior, so why mess with that? – C3roe Commented Nov 20, 2014 at 19:15
• 1 Sounds good. Expected that to be default behaviour.It was raised as a defect in my project by QA.Can you please give a reference to any standard document available over internet that supports this default behaviour. – Ravi Ranjan Commented Nov 20, 2014 at 19:20
• "It was raised as a defect in my project by QA". Oh wow. – sebnukem Commented Nov 20, 2014 at 19:22
• @sebnukem sounds funny..but that's truth – Ravi Ranjan Commented Nov 20, 2014 at 19:28
• I found a site that does what you're looking for. Credit goes to him, not me. Refer to the edited answer below. – chdltest Commented Nov 20, 2014 at 20:06

5 Answers 5

I also faced the same problem see my question anchor links referring to the page sections not working on browser refresh, back and forward

But I had to do it the way normal links work so what I did was I manually go to that section by getting the element from the hash.

$(window).on('hashchange', function () 
{
    var top = $(window.location.hash).offset().top;
    $(window).scrollTop(top);
});

This works for forward and back buttons. And for refresh also you need to do the same thing. Get the element from the hash and scroll to that element manually.

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>

http://www.the-art-of-web./javascript/remove-anchor-links/

Visit that site. Scroll to the bottom and use test the anchors. It's doing what you want.

"The following code will parse your HTML page and override the function of any links that target anchor points on the same page. The link function will be replaced with a call to the scrollIntoView method of the target element:

document.addEventListener("DOMContentLoaded", function() {
  var links = document.getElementsByTagName("A");
  for(var i=0; i < links.length; i++) {
    if(!links[i].hash) continue;
    if(links[i].origin + links[i].pathname != self.location.href) continue;
    (function(anchorPoint) {
      links[i].addEventListener("click", function(e) {
        anchorPoint.scrollIntoView(true);
        e.preventDefault();
      }, false);
    })(document.getElementById(links[i].hash.replace(/#/, "")));
  }
}, false);

if (document.referrer == "") {
window.open("index.php");
} else {
    window.history.go(-1);
    return false;
}

Without jQuery and without having to modify every anchor elements:

<script>
    // Makes sure we jump to anchor on reload
    document.addEventListener("DOMContentLoaded", function (event) {
        var ele = document.getElementById(window.location.hash.substring(1));
        ele.scrollIntoView();
    });

    // Makes sure we jump to anchor when doing back and forward
    window.addEventListener('hashchange', () => {
        var ele = document.getElementById(window.location.hash.substring(1));
        ele.scrollIntoView();
    }, false);
</script>