Question

I used the onhashchange event to scroll automatically to an anchor link in a FAQ page when the user presses the back button.

It works fine except when the forward button is pressed, case in which the scrolling doesn’t work.

I haven’t been able to understand why this happens. Does anybody have an idea of why this happens?

Demo page: http://static.nemesisdesign.net/hashchange-issue/index.html (to reproduce the issue try clicking on the links on the left column, then press your back button few times, then press your forward button)

This is the part of the code which does the scrolling:

// if browser supports onhashchange event
if ("onhashchange" in window){
    $(window).bind('hashchange', function(e){
        e.preventDefault();
        var href = (location.hash != '') ? location.hash : '#container'
        scrollToFaq(href);
        return false;
    });
}

scrollToFaq = function(href){
    // scroll
    $('html, body').animate(
        // scroll to clicked item
        {scrollTop: $(href).offset().top},
        400, // duration in ms
        function(){
            if(href != '#container'){
                location.hash = href.replace('#',''); // update hash
            }
            // show back button if necessary
            if($(window).scrollTop() > 60){
                // onclick back to top button
                $('#back-top').fadeIn();
            }
        }
    );
}

// when clicking on a faq menu item
$('#faqmenu a').click(function(e){
    // prevent default behaviour
    e.preventDefault();
    // cache href attribute
    scrollToFaq($(this).attr('href'));
});

Answer 1

It seems that when using the back & forward buttons the browser does its default scroll action regardless of the e.preventDefault(); in the onhashchange event handler.

Basically this won’t stop the browser from jumping when using the back and forward buttons:

if ("onhashchange" in window){
    $(window).bind('hashchange', function(e){
        e.preventDefault();
        return false;
    });
}

The simplest hack that I could think of is using some inexistent id in the hash (such that it doesn’t jump).

For example for referencing <div id="a"> you can use <a href="#xxx_a">. Then all you have to do is strip the xxx_ part with javascript.

But the disadvantage is that you break the default behavior of the links for javascript disabled users, and browsers that don’t support onhashchange.

You can check out this jsFiddle to see a working example