這篇文章主要介紹了jQuery的Scrollify插件實現(xiàn)滑動到頁面下一節(jié)點的相關(guān)資料,需要的朋友可以參考下
有時我們需要做一個單頁面介紹產(chǎn)品特性，而單頁面內(nèi)容非常多且頁面非常長，為了快速定位到產(chǎn)品特性節(jié)點，我們使用js偵聽用戶滾輪事件，當(dāng)用戶觸發(fā)滾輪滑動或者使用手勢觸屏滑動時，即可定位到相應(yīng)的節(jié)點。一款jQuery插件叫Scrollify幫我們做到了。
Scrollify需要jQuery 1.6+以及緩沖動畫easing插件配合來實現(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)選項配置：
- $.scrollify({
- section : "section",
- sectionName : "section-name",
- easing: "easeOutExpo",
- scrollSpeed: 1100,
- offset : 0,
- scrollbars: true,
- before:function() {},
- after:function() {}
- });
選項說明：
section：節(jié)點部分選擇器.
sectionName：每一個section節(jié)點對應(yīng)的data屬性.
easing：定義緩沖動畫.
offset：定義每個色彩tion節(jié)點的偏移量.
scrollbars：是否顯示滾動條.
before：回調(diào)函數(shù),滾動開始前觸發(fā).
after：回調(diào)函數(shù),滾動完成后觸發(fā).
Scrollify還提供了方法調(diào)用，如：
- $.scrollify("move","#name");
以上代碼可以直接滾動到#name的節(jié)點。
以上所述就是本文的全部內(nèi)容了，希望大家能夠喜歡。
新聞熱點
疑難解答
圖片精選
