Of Stack

jQuery's Scrollify plug in implements sliding to the next node on the page

  • 2020-07-21 06:36:04
  • OfStack

Sometimes we need to make a single page to introduce the product features, but the content of the single page is very large and the page is very long. In order to quickly locate the product features node, we use js to listen for the user's scroll events. When the user triggers the scroll slide or USES the gesture to touch the screen, the corresponding node can be located. An jQuery plugin called Scrollify did it for us.

Scrollify requires jQuery 1.6+ and the buffer animation easing plug-in. 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>

Here is the default option configuration for scrollify: 


$.scrollify({ 
    section : "section", 
    sectionName : "section-name", 
    easing: "easeOutExpo", 
    scrollSpeed: 1100, 
    offset : 0, 
    scrollbars: true, 
    before:function() {}, 
    after:function() {} 
});

Option description:

section: Node part selector.
sectionName: The data attribute for each section node.
easing: Define buffering animation.
offset: Defines the offset for each color tion node.
scrollbars: Whether to display the scroll bar.
before: Callback function triggered before scrolling starts.
after: Callback function, triggered after scrolling is complete.

Scrollify also provides method calls such as: 


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

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

This is the end of this article, I hope you enjoy it.

Related articles: