jquery's scrollify plugin implementation slides to the next node of the page _jquery

Sometimes we need to do a single page to introduce product features, and a single page content is very much 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 the user triggers the wheel slide or use gesture touch screen slide, you can locate the corresponding node. A jquery plugin called scrollify to help us do it.

Scrollify need to be implemented with jquery 1.6+ and buffer animation easing plug-ins. The HTML basic structure is as follows:

<! DOCTYPE html> 
 
 

The following is the default option configuration for scrollify:

$.scrollify ({section 
    : "sectionname", " 
    section-name", 
    easing: "Easeoutexpo", 
    scrollspeed : 1100, 
    offset:0, 
    scrollbars:true, 
    before:function () {}, 
    after:function () {} 
}); 

Option Description:

Section: Node part selector.
SectionName: Each section node corresponds to the Data property.
Easing: Defines a buffered animation.
Offset: Defines the offsets for each color tion node.
ScrollBars: scroll bar is displayed.
Before: callback function, triggered before scrolling starts.
After: callback function, triggered after scrolling completes.

Scrollify also provides a method call, such as:

$.scrollify ("Move", "#name"); 

The above code can be scrolled directly to the #name node.

The above mentioned is the entire content of this article, I hope you can enjoy.