Back button not working in chrome

We are using jscrollpane to navigate through some divs when clicking a hash anchor (#). When the back button is clicked in Chrome, the url changes in the address bar but the browser does not navigate back to the div. In Firefox it does go back to the previous div.

http://www.sandbox.brightboxstudios.com/swings/test4.html

I hav开发者_运维百科e tried all kinds of things including plug-ins, different jquery library versions.

Also, everything I have tried to make the active menu items change class to active when on the url anchor hasn't worked, most likely because of my lack of javascript knowledge. This would be awesome to fix as well!

I tried this code fix over your code:

$('ul.nav a')
.unbind("click") // to remove your binding in my console
.bind('click',function(event){ // rebind event handler
    var $anchor = $(this);
    $('html, body').stop().animate({
      scrollLeft: $($anchor.attr('href')).offset().left
    }, 1500,'easeInOutExpo');
  event.preventDefault();

  // this is a trick:
  location.href = $anchor.attr('href');
  return false;
});

and navigation started working. Try it yourself.

There is one problem I see that is almost definitely affecting things.

Somewhere in your javascript, the hash anchor is being prepended with a forward slash, making the resulting url look like this:

http://www.sandbox.brightboxstudios.com/swings/test4.html#/section3

Note the forward slash after the # hash, making it a technically invalid URL (there is no id or name with the value #/section3). This is not appearing in the status bar when I hover the link, only in the result URL, which leads me to believe it has to do with the address plugin you are using (although I have no personal experience with it).

The back button is only working for me in Firefox when the previous URL is one without a hash (i.e. a valid url). I had a hard time debugging your page with all the loaded plugins, but see if you can do something to make those URLs valid and get rid of that forward slash.

Aside, even though it's just a demo you should make sure you aren't duplicating ids. You have #header and #middle appearing several times. It's best to just remove all doubt while debugging (or always, actually) and use valid markup.

Hope this gets you a little closer to solving your problem.