jQuery的Scrollify插件實(shí)現(xiàn)滑動(dòng)到頁(yè)面下一節(jié)點(diǎn)

2024-05-06 16:22:42

字體：大中小

供稿：網(wǎng)友

這篇文章主要介紹了jQuery的Scrollify插件實(shí)現(xiàn)滑動(dòng)到頁(yè)面下一節(jié)點(diǎn)的相關(guān)資料,需要的朋友可以參考下

有時(shí)我們需要做一個(gè)單頁(yè)面介紹產(chǎn)品特性，而單頁(yè)面內(nèi)容非常多且頁(yè)面非常長(zhǎng)，為了快速定位到產(chǎn)品特性節(jié)點(diǎn)，我們使用js偵聽用戶滾輪事件，當(dāng)用戶觸發(fā)滾輪滑動(dòng)或者使用手勢(shì)觸屏滑動(dòng)時(shí)，即可定位到相應(yīng)的節(jié)點(diǎn)。一款jQuery插件叫Scrollify幫我們做到了。

Scrollify需要jQuery 1.6+以及緩沖動(dòng)畫easing插件配合來實(shí)現(xiàn)。HTML基本結(jié)構(gòu)如下：

<!DOCTYPE HTML>

<html>

<head>

<meta charset="utf-8">

<title>scrollify</title>



<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() {}

});