jQuery LocalScroll + hashchange event browser comp

问题:

I'm building a site where I am using Ariel Fleslers jQuery LocalScroll plugin, which I want to do two things:

1) Animate a scroll to an anchor when a link is clicked
2) Scroll to the previously visited anchor when the browsers' back button is pressed.

The scrolling takes place inside a container where the content is overflowing.

Number one was straight forward enough. To acheive number two I did a fair bit of googling but didn't really find a solution, even though I came across a few posts by people who were looking to do something similar.

I ended up using Ben Almans jQuery hashchange event plugin together with LocalScroll to acheive the desired result, the code looks like this:

    $(document).ready(function(){
    $.localScroll({
        hash:true,
        target:'#container',
        duration:500
        }); 

$(window).hashchange( function(){
    var hash = location.hash;

    if (hash === ''){
    location.hash = '#main';
    }

    $.localScroll.hash({
    reset:false,
    hash:true,
    target:'#container',
    duration:500
    });  
    });
    $(window).hashchange();
    }); 

The above code, even though I'm somewhat of a hack (no pun intended) when it comes to coding, does what I want in Firefox, Explorer and Opera. However, I get different issues in Chrome and Safari.

In Chrome, basically, the scroll is animated when a link is clicked, but when the browsers back button is pressed it just jumps to the anchor without animating the transition. On a closer inspection though, it seems like it does animate the back button once in a while, but I can't get my head around why it only does it some of the time.

In Safari, it jumps to the anchor without animating regardless of whether a link is clicked or the back button is used.

The animation worked in Safari before I implemented the hashchange event solution, when the code looked like this:

 $(document).ready(function() {



$.localScroll({
hash:true,
target:'#container',
duration:500
});
});  

Does anyone have any ideas as to what is causing these issues in Chrome and Safari? As I said, I'm a designer, not a coder, and this is really stretching my abilities so feel free to point out any mistakes I've made in the code above regardless of whether they have nothing to do with the issue at hand or not.

Also, thanks to Ariel and Ben for these great plugins.

EDIT: Ok so here is another weird thing, when I uploaded the site to a test server that I run locally, scrolling on link click works in Safari, even though the exact same code doesn't work when I run it off-server. In any case, neither Safari nor Chrome triggers the animation when the back button is pressed so that problem remains.

回答1:

I had serious issues with both of those plugins; they are hard to use, feature lacking, and buggy.

Try this combination instead:

• https://github.com/browserstate/history.js
• https://github.com/balupton/jquery-scrollto
• https://github.com/browserstate/ajaxify

It'll handle your scrolling way smoother, support the HTML5 History API and work in all the browsers.