木匣子

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/

键盘快捷键

全局

?
快捷键帮助
/或⌘K
搜索
gh
首页
ga
归档
gt
标签
gc
分类
gg
回到顶部
G
跳到底部
h
较新一篇 / 上一页
l
较旧一篇 / 下一页
Esc
关闭弹窗

文章列表首页、归档、标签、分类

j
选中下一篇
k
选中上一篇
o或Enter
打开选中的文章

阅读文章和其他页面

j
向下滚动
k
向上滚动
yy
复制本页链接
c
跳到留言