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

Question

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

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

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

第一个很简单。为了获得第二名，我做了相当多的谷歌搜索，但并没有真正找到解决方案，尽管我遇到了一些想要做类似事情的人的帖子。

我最终使用 Ben Almans jQuery hashchange 事件插件 与 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 并适用于所有浏览器。