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

我对这两个插件都有严重的问题;它们很难使用，缺乏功能，而且有缺陷。

请尝试使用此组合：

它将处理您的滚动方式更流畅，支持HTML5历史记录API并适用于所有浏览器。

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

1 个答案: