jQuery的Scrollify插件实现滑动到页面下一节点
更新时间：2015年07月05日 11:39:45 投稿：hebedich
这篇文章主要介绍了jQuery的Scrollify插件实现滑动到页面下一节点的相关资料,需要的朋友可以参考下
有时我们需要做一个单页面介绍产品特性，而单页面内容非常多且页面非常长，为了快速定位到产品特性节点，我们使用js侦听用户滚轮事件，当用户触发滚轮滑动或者使用手势触屏滑动时，即可定位到相应的节点。一款jQuery插件叫Scrollify帮我们做到了。
Scrollify需要jQuery 1.6+以及缓冲动画easing插件配合来实现。HTML基本结构如下：
<!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>
以下是scrollify的默认选项配置：
$.scrollify({
section : "section",
sectionName : "section-name",
easing: "easeOutExpo",
scrollSpeed: 1100,
offset : 0,
scrollbars: true,
before:function() {},
after:function() {}
});
选项说明：
section：节点部分选择器.
sectionName：每一个section节点对应的data属性.
easing：定义缓冲动画.
offset：定义每个色彩tion节点的偏移量.
scrollbars：是否显示滚动条.
before：回调函数,滚动开始前触发.
after：回调函数,滚动完成后触发.
Scrollify还提供了方法调用，如：
$.scrollify("move","#name");
以上代码可以直接滚动到#name的节点。
以上所述就是本文的全部内容了，希望大家能够喜欢。
相关文章
下面小编就为大家分享一篇zTree 树插件实现全国五级地区点击后加载的示例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-02-02
效果类似这种，自动播放，实质控制层的显示隐藏。需要的朋友可以参考下。2011-12-12
除了全局函数外，jquery中的大多数插件都是通过jquery对象的方法提供的2012-08-08
将滚动的内容查询出来，放在一个div 或者别的容器里面，具体的实现代码如下2014-06-06
这篇文章主要介绍了使用jquery选择器如何获取父级元素、同级元素、子元素,需要的朋友可以参考下2014-05-05
可以让指定的层浮动到网页上的任何位置，当滚动条滚动时它会保持在当前位置不变，不会产生闪动2008-12-12
下面小编就为大家带来一篇jQuery之简单的表单验证实例。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-07-07
这篇文章主要介绍了jquery简单实现幻灯片的方法,核心的js代码只有9行即可实现幻灯切换效果,非常简单实用,需要的朋友可以参考下2015-08-08
使用jquery做了一个项目，下拉列表选择项变化时，获取选中项的文本在不同浏览器中的兼容性问题在本文将为大家介绍下2013-09-09
jQuery基础 -- 处理表单元素2010-02-02
最新评论