jquery平滑滚动插件

Jquery本身可以实现滚的功能，不过有点太粗糙，与其说是滚，还不如是跳。因此需要一些插件来去实现平滑的滚动的效果。最近做wiki发现了几个不错的插件。jquery.smooth-scroll就是很不错的一款实现此功能的插件。

插件信息

官网：https://github.com/kswedberg/jquery-smooth-scroll

Demo：http://plugins.learningjquery.com/smooth-scroll/demo/

使用步骤

1、引入以下的js和css文件

1 2	<scriptsrc="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script> <scriptsrc="../src/jquery.smooth-scroll.js"></script>

2、在head标签中加入以下js代码

1 2 3 4 5 6 7

$(function(){ $("#btn").click(function(){ $('a').smoothScroll({ //参数列表 }); }); })

3、在body标签中加入相应的标签

插件说明
1、允许我们轻易地实现滑动到页面某个位置
2、可以这样来调用插件

1	$('a').smoothScroll();

3、可以根据自己的需要指定一个外部容器，那么滚动就是在这个容器内发生，而不是在页面级别发生了

1	$('#container a').smoothScroll();

4、可以通过下面的方式来排除指定容器的包含元素

1 2 3

$('#container a').smoothScroll({ excludeWithin: ['.container2'] });

5、通过下面的语句来排除满足指定条件的元素

1 2 3

$('a').smoothScroll({ exclude: ['.rough','#chunky'] });

6、调整滑动到哪个位置就停止

1 2 3

$('.backtotop').smoothScroll({ offset: -100 });

7、设定一个滑动开始之前的回调函数

1 2 3 4 5

$('a').smoothScroll({ beforeScroll: function() { alert('ready to go!'); } });

8、设定一个滑动结束的回调函数

1 2 3 4 5

$('a').smoothScroll({ afterScroll: function() { alert('we made it!'); } });

9、可以添加一个按钮用来支持点击后回到之前的位置，实际上就是一个历史记录的作用

参数配置

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18

$.smoothScroll({ //滑动到的位置的偏移量 offset: 0, //滑动的方向，可取 'top' 或 'left' direction: 'top', // 只有当你想重写默认行为的时候才会用到 scrollTarget: null, // 滑动开始前的回调函数。`this` 代表正在被滚动的元素 beforeScroll: function() {}, //滑动完成后的回调函数。 `this` 代表触发滑动的元素 afterScroll: function() {}, //缓动效果 easing: 'swing', //滑动的速度 speed: 400, // "自动" 加速的系数 autoCoefficent: 2 });