jQuery的Scrollify插件實現滑動到頁面下一節點

2019-11-20 12:06:15

字體：大中小

來源：轉載

供稿：網友

有時我們需要做一個單頁面介紹產品特性，而單頁面內容非常多且頁面非常長，為了快速定位到產品特性節點，我們使用js偵聽用戶滾輪事件，當用戶觸發滾輪滑動或者使用手勢觸屏滑動時，即可定位到相應的節點。一款jQuery插件叫Scrollify幫我們做到了。

Scrollify需要jQuery 1.6+以及緩沖動畫easing插件配合來實現。HTML基本結構如下：

<!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的默認選項配置：

$.scrollify({     section : "section",     sectionName : "section-name",     easing: "easeOutExpo",     scrollSpeed: 1100,     offset : 0,     scrollbars: true,     before:function() {},     after:function() {} });

選項說明：

section：節點部分選擇器.
sectionName：每一個section節點對應的data屬性.
easing：定義緩沖動畫.
offset：定義每個色彩tion節點的偏移量.
scrollbars：是否顯示滾動條.
before：回調函數,滾動開始前觸發.
after：回調函數,滾動完成后觸發.

Scrollify還提供了方法調用，如：