Home >Web Front-end >JS Tutorial >jQuery的Scrollify插件实现滑动到页面下一节点

jQuery的Scrollify插件实现滑动到页面下一节点

WBOY
WBOYOriginal
2016-06-01 09:54:35913browse

有时我们需要做一个单页面介绍产品特性,而单页面内容非常多且页面非常长,为了快速定位到产品特性节点,我们使用js侦听用户滚轮事件,当用户触发滚轮滑动或者使用手势触屏滑动时,即可定位到相应的节点。一款jQuery插件叫Scrollify帮我们做到了。

Scrollify需要jQuery 1.6+以及缓冲动画easing插件配合来实现。HTML基本结构如下:

<code class="language-html">
  
    <meta charset="utf-8">
    <title>
      scrollify
    </title>
    <!--[if lt IE 9]>
      <script src="html5shiv.min.js">
      </script>
    <![endif]-->
    <script src="jquery.js" type="text/javascript">
    </script>
    <script src="jquery.easing.min.js" type="text/javascript">
    </script>
    <script src="jquery.scrollify.min.js" type="text/javascript">
    </script>
    <script type="text/javascript">
      $(function() {
        $.scrollify({
          section: "section",
        });
      });
    </script>
  
  
  
</code>

 

以下是scrollify的默认选项配置:

<code class="language-javascript">$.scrollify({
    section: "section",
    sectionName: "section-name",
    easing: "easeOutExpo",
    scrollSpeed: 1100,
    offset: 0,
    scrollbars: true,
    before: function() {},
    after: function() {}
});</code>

选项说明:

  • section:节点部分选择器.
  • sectionName:每一个section节点对应的data属性.
  • easing:定义缓冲动画.
  • offset:定义每个色彩tion节点的偏移量.
  • scrollbars:是否显示滚动条.
  • before:回调函数,滚动开始前触发.

 

Scrollify还提供了方法调用,如:

<code class="language-javascript">$.scrollify("move","#name");</code>

上面代码可以直接滚动到#name的节点。

 

以上所述就是本文的全部内容了,希望大家能够喜欢。

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