Home > Article > Web Front-end > jQuery's Scrollify plug-in implements sliding to the next node on the page_jquery

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

WBOYOriginal: 2016-05-16 15:51:311322browse

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.

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：jQuery dynamic background image effect implementation method_jqueryNext article：jQuery dynamic background image effect implementation method_jquery

See more

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

Related articles