分类分类
大小:122KB语言:简体
类别:jQuery插件系统:WinXP, Win7, Win8, Win10, WinAll
smoothscroll.js又称为smoothscroll插件,是一款适用于jquery页面的平滑滚动插件,安装使用这款smoothscroll.js平滑滚动插件可以让您在进行jquery开发时更加方便。
使用步骤
1、引入以下的js和css文件
<script src="http://libs.baidu.com/jquery/1.11.1/jquery.min.js"></script>
<script src="../src/jquery.smooth-scroll.js"></script>
<script src="../lib/jquery.ba-bbq.js"></script>
2、在head标签中加入以下js代码
$(function(){
$("#btn").click(function(){
$('a').smoothScroll({
//参数列表
});
});
})
3、在body标签中加入相应的标签
插件说明
1、允许我们轻易地实现滑动到页面某个位置
2、可以这样来调用插件
$('a').smoothScroll();
3、可以根据自己的需要指定一个外部容器,那么滚动就是在这个容器内发生,而不是在页面级别发生了
$('#container a').smoothScroll();
4、可以通过下面的方式来排除指定容器的包含元素
$('#container a').smoothScroll({
excludeWithin: ['.container2']
});
5、通过下面的语句来排除满足指定条件的元素
$('a').smoothScroll({
exclude: ['.rough','#chunky']
});
6、调整滑动到哪个位置就停止
$('.backtotop').smoothScroll({
offset: -100
});
7、设定一个滑动开始之前的回调函数
$('a').smoothScroll({
beforeScroll: function() {
alert('ready to go!');
}
});
8、设定一个滑动结束的回调函数
$('a').smoothScroll({
afterScroll: function() {
alert('we made it!');
}
});
9、可以添加一个按钮用来支持点击后回到之前的位置,实际上就是一个历史记录的作用
参数配置
$.smoothScroll({
//滑动到的位置的偏移量
offset: 0,
//滑动的方向,可取 'top' 或 'left'
direction: 'top',
// 只有当你想重写默认行为的时候才会用到
scrollTarget: null,
// 滑动开始前的回调函数。`this` 代表正在被滚动的元素
beforeScroll: function() {},
//滑动完成后的回调函数。 `this` 代表触发滑动的元素
afterScroll: function() {},
//缓动效果
easing: 'swing',
//滑动的速度
speed: 400,
// "自动" 加速的系数
autoCoefficent: 2
});
同厂商应用
猜你喜欢
相关下载
jQuery3D万花筒旋转动画特效插件jQuery插件101KB
详情jQuery跨浏览器响应式消息通知插件jQuery插件119KB
详情jQuery商品分类侧边栏列表商城导航菜单插件jQuery插件60KB
详情jQuery仿旅游网站侧边栏菜单特效插件jQuery插件84KB
详情jQuery myFocus插件jQuery插件806KB
详情jQuery炫酷焦点图特效插件jQuery插件927KB
详情jQuery轮播图动画特效插件jQuery插件2.3M
详情jQuery隐藏在线QQ客服面板插件jQuery插件151KB
详情jQuery九宫格抽奖转盘特效插件jQuery插件278KB
详情