smoothscroll.js插件是一款專業(yè)的js頁面平滑滾動插件,將頁面滾動的行為作為Windows對象的擴展,安裝該軟件之后在開發(fā)jQuery的時候更方便快捷,導入到j(luò)s中就可以開始使用了。感興趣的小伙伴們可以下載試試哦。
使用步驟
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(chǎn)’).smoothScroll({
//參數(shù)列表
});
});
})
3、在body標簽中加入相應(yīng)的標簽
插件說明
1、允許我們輕易地實現(xiàn)滑動到頁面某個位置
2、可以這樣來調(diào)用插件
$(‘a(chǎn)’).smoothScroll();
3、可以根據(jù)自己的需要指定一個外部容器,那么滾動就是在這個容器內(nèi)發(fā)生,而不是在頁面級別發(fā)生了
$(‘#container a’).smoothScroll();
4、可以通過下面的方式來排除指定容器的包含元素
$(‘#container a’).smoothScroll({
excludeWithin: [‘.container2’]
});
5、通過下面的語句來排除滿足指定條件的元素
$(‘a(chǎn)’).smoothScroll({
exclude: [‘.rough’,‘#chunky’]
});
6、調(diào)整滑動到哪個位置就停止
$(‘.backtotop’).smoothScroll({
offset: -100
});
7、設(shè)定一個滑動開始之前的回調(diào)函數(shù)
$(‘a(chǎn)’).smoothScroll({
beforeScroll: function() {
alert(‘ready to go!’);
}
});
8、設(shè)定一個滑動結(jié)束的回調(diào)函數(shù)
$(‘a(chǎn)’).smoothScroll({
afterScroll: function() {
alert(‘we made it!’);
}
});
9、可以添加一個按鈕用來支持點擊后回到之前的位置,實際上就是一個歷史記錄的作用
參數(shù)配置
$.smoothScroll({
//滑動到的位置的偏移量
offset: 0,
//滑動的方向,可取 ‘top’ 或 ‘left’
direction: ‘top’,
// 只有當你想重寫默認行為的時候才會用到
scrollTarget: null,
// 滑動開始前的回調(diào)函數(shù)。`this` 代表正在被滾動的元素
beforeScroll: function() {},
//滑動完成后的回調(diào)函數(shù)。 `this` 代表觸發(fā)滑動的元素
afterScroll: function() {},
//緩動效果
easing: ‘swing’,
//滑動的速度
speed: 400,
// “自動” 加速的系數(shù)
autoCoefficent: 2
});