jQuery LocalScroll + hashchange 事件浏览器兼容性问题

Question

我正在构建一个使用Ariel Fleslers jQuery LocalScroll plugin 的网站，我想做两件事：

1) 当点击链接时动画滚动到锚点
2) 当浏览器的后退按钮被按下时，滚动到之前访问过的锚点。

滚动发生在内容溢出的容器内。

第一名是直截了当的。为了获得第二名，我进行了相当多的谷歌搜索，但并没有真正找到解决方案，尽管我遇到了一些希望做类似事情的人的帖子。

我最终将Ben Almans jQuery hashchange event plugin 与 LocalScroll 一起使用来获得所需的结果，代码如下所示：

    $(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();
    }); 

上面的代码，尽管我在编码方面有点笨拙（没有双关语），但在 Firefox、Explorer 和 Opera 中可以满足我的要求。但是，我在 Chrome 和 Safari 中遇到了不同的问题。

在 Chrome 中，基本上，当点击链接时滚动是动画的，但是当按下浏览器的后退按钮时，它只是跳转到锚点而不动画过渡。但仔细观察后，它似乎确实偶尔会为后退按钮设置动画，但我无法理解为什么它只是在某些时候才会这样做。

在 Safari 中，无论是单击链接还是使用后退按钮，它都会跳转到锚点而不进行动画处理。

在我实现 hashchange 事件解决方案之前，动画在 Safari 中有效，当时代码如下所示：

 $(document).ready(function() {



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

是否有人对导致 Chrome 和 Safari 出现这些问题的原因有任何想法？正如我所说，我是一名设计师，而不是编码员，这确实在扩展我的能力，所以请随时指出我在上面的代码中犯的任何错误，无论它们是否与手头的问题无关与否。

另外，感谢 Ariel 和 Ben 提供这些出色的插件。

编辑：好的，这是另一件奇怪的事情，当我将网站上传到我在本地运行的测试服务器时，在 Safari 中滚动链接点击工作，即使完全相同的代码在我时不起作用在服务器外运行它。无论如何，当按下后退按钮时，Safari 和 Chrome 都不会触发动画，因此问题仍然存在。

Answer 1

我对这两个插件都有严重的问题；它们难以使用、缺乏功能且有缺陷。

试试这个组合：

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

它将更流畅地处理您的滚动方式，支持 HTML5 History API 并在所有浏览器中工作。