SmoothScroll.js(js页面平滑滚动插件) 绿色版
无插件
360 √
腾讯 √
金山 √
瑞星 √
smoothscroll.js插件是一款专业的js页面平滑滚动插件,将页面滚动的行为作为Windows对象的扩展,安装该软件之后在开发jQuery的时候更方便快捷,导入到js中就可以开始使用了。感兴趣的小伙伴们可以下载试试哦。
使用步骤
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
});
下载地址
热门软件
Office三合一精简版 V2021 完美免费版
沙漏验机 V5.2.2 官方安装版
EZPlayer V1.5.0 官方安装版
Atmel Studio7 V7.0.1931 绿色免费版
大白管家 V3.2 官方版
Win7万能USB驱动 V3.0 离线版
秋天图片批量剪辑工具 V1.0 绿色中文版
联想电脑管家 V4.0.20.11192 官方最新版
Adobe Shockwave Player(多媒体播放器) V12.3.5.205 多国语言版
游聚游戏平台 V0.7.25 官方最新版
装机必备 更多+
大家都在看
