JQuery's Scrollify plug-in slides to the next node of the page
This article mainly introduces jQuery's Scrollify plug-in to slide to the next node of the page. For more information, see
Sometimes we need to make a single page to introduce product features, while a single page contains a lot of content and the page is very long. In order to quickly locate the product feature node, we use js to listen for user wheel events, when you trigger scroll wheel sliding or use the gesture touch screen sliding, you can locate the corresponding node. A jQuery plug-in called Scrollify helps us achieve this.
Scrollify requires the combination of jQuery 1.6 + and the buffer animation easing plug-in. The basic structure of HTML is as follows:
?
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
<! 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 are the default options for scrollify:
?
1 2 3 4 5 6 7 8 9 10 |
$. Scrollify ({ Section: "section ", SectionName: "section-name ", Easing: "easeOutExpo ", ScrollSpeed: 1100, Offset: 0, Scrollbars: true, Before: function (){}, After: function (){} }); |
Option description:
Section: node selector.
SectionName: The data attribute corresponding to each section node.
Easing: defines the buffer animation.
Offset: defines the offset of each color tion node.
Scrollbars: whether to display the scroll bar.
Before: callback function, triggered before the rolling starts.
After: callback function, triggered after scrolling.
Scrollify also provides method calls, such:
?
1 |
$. Scrollify ("move", "# name "); |
The above code can be directly rolled to the # name node.
The above is all the content of this article. I hope you will like it.