我正在构建一个使用 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 都不会触发动画,因此问题仍然存在。