CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Ravi Ranjan
Ravi Ranjan

Reputation: 231

Browser back button does not work for Anchor links

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.

Upvotes: 12

Views: 10296

Answers (5)

Slion
Slion

Reputation: 3048

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>

Upvotes: 0

Pakokku
Pakokku

Reputation: 1

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

Upvotes: 0

sneha
sneha

Reputation: 369

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.

Upvotes: 5

Tony Chiboucas
Tony Chiboucas

Reputation: 5683

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>

Upvotes: 1

chdltest
chdltest

Reputation: 873

http://www.the-art-of-web.com/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);

Upvotes: 0

Related Questions