木匣子

Web/Game/Programming/Life etc.

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

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

原来的页面链接,如 <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="#hash"/> 标签,并将页面平滑滚动到指定位置:

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

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

$.localScroll();

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

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

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