jQuery的Scrollify插件實現(xiàn)滑動到頁面下一節(jié)點
有時我們需要做一個單頁面介紹產(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的默認選項配置:
$.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)容了,希望大家能夠喜歡。
相關(guān)文章
jQuery動態(tài)添加刪除select項(實現(xiàn)代碼)
以下是對jQuery動態(tài)添加刪除select項的實現(xiàn)代碼進行了詳細的分析介紹,需要的朋友可以過來參考下2013-09-09iframe里面的元素觸發(fā)父窗口元素事件的jquery代碼
這篇文章主要介紹了jquery:iframe里面的元素怎樣觸發(fā)父窗口元素的事件,很簡單,但很實用,需要的朋友可以看看2014-10-10jquery 跳到頂部和底部動畫2句代碼簡單實現(xiàn)
使用2句代碼簡單實現(xiàn)jquery動畫的跳到頂部和底部;當(dāng)點擊頂部按鈕的時候,執(zhí)行方法,scrollTop屬性獲取選中標簽距滾動條的距離,具體的實現(xiàn)如下,感興趣的朋友可以參考下2013-07-07jquery封裝插件時匿名函數(shù)形參和實參的寫法解釋
本文主要介紹了jquery封裝插件時匿名函數(shù)形參和實參的寫法解釋。具有很好的參考價值,下面跟著小編一起來看下吧2017-02-02jquery序列化form表單使用ajax提交后處理返回的json數(shù)據(jù)
這篇文章主要介紹了jquery序列化form表單,使用ajax提交后處理返回的json數(shù)據(jù)的示例,需要的朋友可以參考下2014-03-03