给页面链接添加平滑滚动效果

做完厦图答题神器,发现即使是这样一个简单的小页面,也可以添加上很赏心悦目的效果。正好我想要给页面的链接 (local-links) 加上平滑滚动效果,搜索了一下发现 jQuery 的插件正好提供了这样的功能——$.scrollTo();

$.scrollTo(); 是一个能平滑滚动到页面上特定位置或元素的 jQuery 插件,还提供了丰富的动画效果。

插件介绍:  http://flesler.blogspot.com/2007/10/jqueryscrollto.html
官方演示: http://demos.flesler.com/jquery/scrollTo/

原来的页面链接,如 <a href=”#local-link“>GO-TO-LOCAL-LINK</a> 会让页面直接定位到 <div id=”local-link“> 所在的位置。这种跳转是生硬的,而想要实现平滑的滚动到目标元素,就要用到 $.scrollTo(); 了:

$.scrollTo("#local-link", 500); // 将页面平滑滚动到 id="local-link" 的元素所在位置, 时间:500毫秒

为了响应所有的页面链接,可以使用 jQuery 选择器,找到所有带有当前页面链接的 <a href=”#xxx“> 标签,并将页面平滑滚动到指定位置:

$('a[href^=#]').click(function(e) {
	$.scrollTo($(this).attr('href'), 500);
	return e.preventDefault();
}); 

实际上 $.scrollTo(); 的作者还发布了另一个叫 $.localScroll(); 的插件,除了完成上述功能外还做了额外的优化。只需要一句话即可:

$.localScroll();

插件介绍: http://flesler.blogspot.com/2007/10/jquerylocalscroll-10.html
官方演示: http://demos.flesler.com/jquery/localScroll/

$.localScroll(); 默认的动画时间是 1e3 也就是 1000ms = 1s 。如果需要自定义的话,只需要传入一个包含 during 属性的对象即可:

$.localScroll({during: 500}); // 平滑滚动,时间:500毫秒

现在厦图答题神器的页面上已经有平滑滚动的效果了,成果展示 http://xujc.sinaapp.com/library/