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