插件描述：相信大家都见过了诸如 回到顶部 和滑动到页面指定位置的效果，今天我我要给大家介绍的正是这样一款平滑滚动的jquery插件。
相信大家都见过了诸如 回到顶部 和滑动到页面指定位置的效果，今天我我要给大家介绍的正是这样一款平滑滚动的jquery插件。
使用步骤
1、引入以下的js和css文件
1 2 3 | <script src="../src/jquery.smooth-scroll.js"></script> <script src="../lib/jquery.ba-bbq.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}); |
特别申明：
本站所有资源都是由网友投稿发布，或转载各大下载站，请自行检测软件的完整性！
本站所有资源仅供学习与参考，请勿用于商业用途，否则产生的一切后果将由您自己承担！
如有侵权请联系我们删除下架，联系方式：lei1294551502@163.com
- 上一个特效： 不容错过的漂亮界面框架-IN ADMIN PANEL
- 下一个特效： 像褶皱纸一样褶皱DOM的JQUERY插件-QRIDOMI