Sometimes we need to create a single page to introduce product features, and the single page has a lot of content and the page is very long. In order to quickly locate the product feature node, we use js to listen to the user's wheel event. When the user triggers the wheel slide or uses a gesture When you touch the screen and slide, you can locate the corresponding node. A jQuery plug-in called Scrollify helps us do this.
Scrollify requires jQuery 1.6 and the buffer animation easing plug-in to implement. The basic structure of HTML is as follows:
<!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>
The following is scrollify’s default option configuration:
$.scrollify({
section : "section",
sectionName : "section-name",
easing: "easeOutExpo",
scrollSpeed: 1100,
offset : 0,
scrollbars: true,
before:function() {},
after:function() {}
});
Option description:
section: Node section selector.
sectionName: the data attribute corresponding to each section node.
easing: Define buffer animation.
offset: Define the offset of each color node.
scrollbars: Whether to display scroll bars.
before: callback function, triggered before scrolling starts.
after: callback function, triggered after scrolling is completed.
Scrollify also provides method calls, such as:
$.scrollify("move","#name");
The above code can scroll directly to the node of #name.
The above is the entire content of this article, I hope you all like it.
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
