jQuery的Scrollify插件實(shí)現(xiàn)滑動(dòng)到頁(yè)面下一節(jié)點(diǎn)
有時(shí)我們需要做一個(gè)單頁(yè)面介紹產(chǎn)品特性,而單頁(yè)面內(nèi)容非常多且頁(yè)面非常長(zhǎng),為了快速定位到產(chǎn)品特性節(jié)點(diǎn),我們使用js偵聽(tīng)用戶滾輪事件,當(dāng)用戶觸發(fā)滾輪滑動(dòng)或者使用手勢(shì)觸屏滑動(dòng)時(shí),即可定位到相應(yīng)的節(jié)點(diǎn)。一款jQuery插件叫Scrollify幫我們做到了。
Scrollify需要jQuery 1.6+以及緩沖動(dòng)畫(huà)easing插件配合來(lái)實(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)說(shuō)明:
section:節(jié)點(diǎn)部分選擇器.
sectionName:每一個(gè)section節(jié)點(diǎn)對(duì)應(yīng)的data屬性.
easing:定義緩沖動(dòng)畫(huà).
offset:定義每個(gè)色彩tion節(jié)點(diǎn)的偏移量.
scrollbars:是否顯示滾動(dòng)條.
before:回調(diào)函數(shù),滾動(dòng)開(kāi)始前觸發(fā).
after:回調(diào)函數(shù),滾動(dòng)完成后觸發(fā).
Scrollify還提供了方法調(diào)用,如:
$.scrollify("move","#name");
以上代碼可以直接滾動(dòng)到#name的節(jié)點(diǎn)。
以上所述就是本文的全部?jī)?nèi)容了,希望大家能夠喜歡。
- jQuery操作dom實(shí)現(xiàn)彈出頁(yè)面遮罩層(web端和移動(dòng)端阻止遮罩層的滑動(dòng))
- jquery實(shí)現(xiàn)網(wǎng)頁(yè)的頁(yè)面平滑滾動(dòng)效果代碼
- jQuery實(shí)現(xiàn)滑動(dòng)頁(yè)面固定頂部顯示(可根據(jù)顯示位置消失與替換)
- JQuery實(shí)現(xiàn)鼠標(biāo)滾輪滑動(dòng)到頁(yè)面節(jié)點(diǎn)
- JQuery 實(shí)現(xiàn)在同一頁(yè)面錨點(diǎn)鏈接之間的平滑滾動(dòng)
- jQuery創(chuàng)建平滑的頁(yè)面滾動(dòng)(頂部或底部)
- 基于jquery的從一個(gè)頁(yè)面跳轉(zhuǎn)到另一個(gè)頁(yè)面的指定位置的實(shí)現(xiàn)代碼(帶平滑移動(dòng)的效果)
- jQuery實(shí)現(xiàn)彈窗下底部頁(yè)面禁止滑動(dòng)效果
相關(guān)文章
jQuery動(dòng)態(tài)添加刪除select項(xiàng)(實(shí)現(xiàn)代碼)
以下是對(duì)jQuery動(dòng)態(tài)添加刪除select項(xiàng)的實(shí)現(xiàn)代碼進(jìn)行了詳細(xì)的分析介紹,需要的朋友可以過(guò)來(lái)參考下2013-09-09用jquery寫(xiě)的菜單從左往右滑動(dòng)出現(xiàn)
這篇文章主要介紹了用jquery寫(xiě)的菜單從左往右滑動(dòng)出現(xiàn)的效果,需要的朋友可以參考下2014-04-04iframe里面的元素觸發(fā)父窗口元素事件的jquery代碼
這篇文章主要介紹了jquery:iframe里面的元素怎樣觸發(fā)父窗口元素的事件,很簡(jiǎn)單,但很實(shí)用,需要的朋友可以看看2014-10-10jquery 跳到頂部和底部動(dòng)畫(huà)2句代碼簡(jiǎn)單實(shí)現(xiàn)
使用2句代碼簡(jiǎn)單實(shí)現(xiàn)jquery動(dòng)畫(huà)的跳到頂部和底部;當(dāng)點(diǎn)擊頂部按鈕的時(shí)候,執(zhí)行方法,scrollTop屬性獲取選中標(biāo)簽距滾動(dòng)條的距離,具體的實(shí)現(xiàn)如下,感興趣的朋友可以參考下2013-07-07javascript右下角彈層及自動(dòng)隱藏(自己編寫(xiě))
需要有個(gè)右下角彈層提示公告的,下面分享早些時(shí)候自己編寫(xiě),以及現(xiàn)在還在應(yīng)用的自動(dòng)彈層,需要的朋友可以參考下2013-11-11jquery封裝插件時(shí)匿名函數(shù)形參和實(shí)參的寫(xiě)法解釋
本文主要介紹了jquery封裝插件時(shí)匿名函數(shù)形參和實(shí)參的寫(xiě)法解釋。具有很好的參考價(jià)值,下面跟著小編一起來(lái)看下吧2017-02-02jquery序列化form表單使用ajax提交后處理返回的json數(shù)據(jù)
這篇文章主要介紹了jquery序列化form表單,使用ajax提交后處理返回的json數(shù)據(jù)的示例,需要的朋友可以參考下2014-03-03