0

我正在构建一个使用 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();
    });

上面的代码，尽管我在编码方面有点 hack（不是双关语），但在 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 都不会触发动画，因此问题仍然存在。

4

1 回答 1

1

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

试试这个组合：

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

于 2011-03-04T13:36:40.377 回答