jQuery的Scrollify插件實(shí)現(xiàn)滑動到頁面下一節(jié)點(diǎn)
有時(shí)我們需要做一個(gè)單頁面介紹產(chǎn)品特性，而單頁面內(nèi)容非常多且頁面非常長，為了快速定位到產(chǎn)品特性節(jié)點(diǎn)，我們使用js偵聽用戶滾輪事件，當(dāng)用戶觸發(fā)滾輪滑動或者使用手勢觸屏滑動時(shí)，即可定位到相應(yīng)的節(jié)點(diǎn)。一款jQuery插件叫Scrollify幫我們做到了。
Scrollify需要jQuery 1.6+以及緩沖動畫easing插件配合來實(shí)現(xiàn)。HTML基本結(jié)構(gòu)如下：
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>scrollify</title>
<!--[if lt IE 9]>
<script src="html5shiv.min.js"></script>
<![endif]-->
<script src="jquery.js"></script>
<script src="jquery.easing.min.js"></script>
<script src="jquery.scrollify.min.js"></script>
<script>
$(function() {
$.scrollify({
section : "section",
});
});
</script>
</head>
<body>
<section></section>
<section></section>
</body>
</html>
以下是scrollify的默認(rèn)選項(xiàng)配置：
$.scrollify({
section : "section",
sectionName : "section-name",
easing: "easeOutExpo",
scrollSpeed: 1100,
offset : 0,
scrollbars: true,
before:function() {},
after:function() {}
});
選項(xiàng)說明：
section：節(jié)點(diǎn)部分選擇器.
sectionName：每一個(gè)section節(jié)點(diǎn)對應(yīng)的data屬性.
easing：定義緩沖動畫.
offset：定義每個(gè)色彩tion節(jié)點(diǎn)的偏移量.
scrollbars：是否顯示滾動條.
before：回調(diào)函數(shù),滾動開始前觸發(fā).
after：回調(diào)函數(shù),滾動完成后觸發(fā).
Scrollify還提供了方法調(diào)用，如：
$.scrollify("move","#name");
以上代碼可以直接滾動到#name的節(jié)點(diǎn)。
以上所述就是本文的全部內(nèi)容了，希望大家能夠喜歡。
- jQuery操作dom實(shí)現(xiàn)彈出頁面遮罩層(web端和移動端阻止遮罩層的滑動)
- jquery實(shí)現(xiàn)網(wǎng)頁的頁面平滑滾動效果代碼
- jQuery實(shí)現(xiàn)滑動頁面固定頂部顯示(可根據(jù)顯示位置消失與替換)
- JQuery實(shí)現(xiàn)鼠標(biāo)滾輪滑動到頁面節(jié)點(diǎn)
- JQuery 實(shí)現(xiàn)在同一頁面錨點(diǎn)鏈接之間的平滑滾動
- jQuery創(chuàng)建平滑的頁面滾動(頂部或底部)
- 基于jquery的從一個(gè)頁面跳轉(zhuǎn)到另一個(gè)頁面的指定位置的實(shí)現(xiàn)代碼（帶平滑移動的效果）
- jQuery實(shí)現(xiàn)彈窗下底部頁面禁止滑動效果
相關(guān)文章
這篇文章主要講述了一個(gè)JQuery入門基礎(chǔ)，實(shí)現(xiàn)的過程效果都很簡單，特別適合初學(xué)者來學(xué)習(xí)，感興趣的小伙伴們可以參考一下2021-11-11
Jquery的Tabs內(nèi)容輪換效果實(shí)現(xiàn)代碼,幾行搞定
本篇文章主要是對Jquery的Tabs內(nèi)容輪換效果的實(shí)現(xiàn)代碼進(jìn)行了介紹。幾行代碼輕松搞定2014-02-02
調(diào)用DOM對象的focus使文本框獲得焦點(diǎn)
要使對象獲得焦點(diǎn)，應(yīng)該調(diào)用DOM對象的focus方法，下面有個(gè)不錯(cuò)的示例，大家可以參考下2014-02-02
jquery dataTable 后臺加載數(shù)據(jù)并分頁實(shí)例代碼
本篇文章主要介紹了jquery dataTable 后臺加載數(shù)據(jù)并分頁實(shí)例代碼，具有一定的參考價(jià)值，有興趣的可以了解一下2017-06-06
使用異步controller與jQuery實(shí)現(xiàn)卷簾式分頁
這篇文章主要介紹了使用異步controller與jQuery實(shí)現(xiàn)卷簾式分頁，使用異步controller與jQuery按需加載內(nèi)容，當(dāng)用戶開始通過網(wǎng)站的內(nèi)容滾動時(shí)進(jìn)一步加載內(nèi)容。,需要的朋友可以參考下2019-06-06
這篇文章主要為大家詳細(xì)介紹了利用jquery實(shí)現(xiàn)瀑布流2種案例,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-09-09
jquery子元素過濾選擇器在某些特殊的情況下還是比較實(shí)用的，下面為大家介紹下具體的使用方法，感興趣的各位可以參考下哈2013-06-06
使用jquery插件實(shí)現(xiàn)等寬輸出文字，具體的調(diào)用及實(shí)現(xiàn)如下，感興趣的朋友可以參考下，希望對大家有所幫助2013-09-09
jQuery實(shí)現(xiàn)當(dāng)前頁面標(biāo)簽高亮顯示的方法
這篇文章主要介紹了jQuery實(shí)現(xiàn)當(dāng)前頁面標(biāo)簽高亮顯示的方法,涉及jQuery通過自定義函數(shù)操作css樣式的技巧,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2015-03-03
JQuery validate插件驗(yàn)證用戶注冊信息
這篇文章主要為大家詳細(xì)介紹了JQuery validate插件驗(yàn)證用戶注冊信息的具體代碼，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-05-05