Use the Scrollify plug-in of jQuery to slide the scroll wheel or gesture to the next node of the page, jqueryscrollify
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:
<!DOCTYPE HTML>The following are the default options for scrollify:
$.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 rolling.
After: Callback function, triggered after scrolling.
Scrollify also provides method calls, such:
$.scrollify("move","#name");The above code can be directly rolled to the # name node.
Download demo source code
Note: The Scrollify plug-in supports IE7 + and most modern browsers.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
