jquery平滑滚动插件
来源:互联网 发布:c语言输出图案 编辑:程序博客网 时间:2024/04/30 04:24
Jquery本身可以实现滚的功能,不过有点太粗糙,与其说是滚,还不如是跳。因此需要一些插件来去实现平滑的滚动的效果。最近做wiki发现了几个不错的插件。jquery.smooth-scroll就是很不错的一款实现此功能的插件。
插件信息
官网:https://github.com/kswedberg/jquery-smooth-scrollDemo:http://plugins.learningjquery.com/smooth-scroll/demo/
使用步骤
1、引入以下的js和css文件1
2
<
script
src
=
"http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"
></
script
>
<
script
src
=
"../src/jquery.smooth-scroll.js"
></
script
>
1
2
3
4
5
6
7
$(function(){
$("#btn").click(function(){
$('a').smoothScroll({
//参数列表
});
});
})
插件说明
1、允许我们轻易地实现滑动到页面某个位置
2、可以这样来调用插件
1
$('a').smoothScroll();
1
$('#container a').smoothScroll();
1
2
3
$('#container a').smoothScroll({
excludeWithin
: ['.container2']
});
1
2
3
$('a').smoothScroll({
exclude: ['.rough','#chunky']
});
1
2
3
$('.backtotop').smoothScroll({
offset: -100
});
1
2
3
4
5
$('a').smoothScroll({
beforeScroll
: function() {
alert('ready to go!');
}
});
1
2
3
4
5
$('a').smoothScroll({
afterScroll
: function() {
alert('we made it!');
}
});
参数配置
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
});
- jquery平滑滚动插件
- jQuery Scroll (jQuery平滑滚动) 插件
- 基于jQuery图片平滑连续滚动插件
- JQuery插件:ScrollTo平滑滚动到页面指定位置
- jQuery Transit平滑插件
- jQuery实现页面平滑滚动
- jquery插件开发学习笔记(六)——页面平滑滚动
- jquery插件开发学习笔记(七)——页面平滑滚动改进
- 定位锚平滑滚动jQuery代码
- jQuery实现的平滑滚动选项卡
- jQuery 锚点跳转滚动条平滑滚动
- jquery 滚动条 平滑滚动到顶部、底部、置顶位置
- jquery滚动分页插件
- jquery 滚动插件
- jquery 图片滚动插件
- jQuery 滚动插件
- JQuery左右滚动插件
- Jquery 全屏滚动插件
- PE文件代码段的加密与解密
- Handler sendMessage 与 obtainMessage (sendToTarget)比较
- 嵌入式面试题
- 一点一点培养你的领袖气质
- Chap 5 习题解答
- jquery平滑滚动插件
- 模拟google suggest(支持中文)
- 每天拿出来2小时浪费(文/王路) 作者: 王路
- Mac Finder 显示隐藏文件
- Android 3.1 r1 API中文文档(6)——ImageView
- 撕开美女的衣服
- nyoj-648-数字1的数量
- Android入门(5)最简单的Handler例子
- 听雨