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


Posted in Javascript onJuly 05, 2015

有时我们需要做一个单页面介绍产品特性,而单页面内容非常多且页面非常长,为了快速定位到产品特性节点,我们使用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的节点。

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

Javascript 相关文章推荐
Prototype最新版(1.5 rc2)使用指南(1)
Jan 10 Javascript
jQuery第三课 修改元素属性及内容的代码
Mar 14 Javascript
JQuery Ajax通过Handler访问外部XML数据的代码
Jun 01 Javascript
强大的jquery插件jqeuryUI做网页对话框效果!简单
Apr 14 Javascript
关于js日期转化为毫秒数“节省20%的效率和和节省9个字符“问题
Mar 01 Javascript
JS在TextArea光标位置插入文字并实现移动光标到文字末尾
Jun 21 Javascript
Jquery getJSON方法详细分析
Dec 26 Javascript
jQuery+HTML5加入购物车代码分享
Oct 29 Javascript
浅析JS操作DOM的一些常用方法
May 13 Javascript
jQuery实现的兼容性浮动层示例
Aug 02 Javascript
JS文件上传神器bootstrap fileinput详解
Jan 28 Javascript
javaScript动态添加Li元素的实例
Feb 24 Javascript
javascript实现控制的多级下拉菜单
Jul 05 #Javascript
javascript遇到html5的一些表单属性
Jul 05 #Javascript
浅谈angularJS 作用域
Jul 05 #Javascript
javascript 应用小技巧方法汇总
Jul 05 #Javascript
javascript常用功能汇总
Jul 05 #Javascript
最新最热最实用的15个jQuery插件汇总
Jul 05 #Javascript
JavaScript返回上一页的三种方法及区别介绍
Jul 04 #Javascript
You might like
php检测网页是否被百度收录的函数代码
2013/10/09 PHP
php微信公众平台开发(一) 配置接口
2016/12/06 PHP
PHP与JavaScript针对Cookie的读写、交互操作方法详解
2017/08/07 PHP
ExtJS Ext.MessageBox.alert()弹出对话框详解
2010/04/02 Javascript
javascript 回到顶部效果的实现代码
2014/02/17 Javascript
回车直接实现点击某按钮的效果即触发单击事件
2014/02/27 Javascript
jQuery实现鼠标滚轮动态改变样式或效果
2015/01/05 Javascript
JavaScript每天定时更换皮肤样式的方法
2015/07/01 Javascript
JS验证邮件地址格式方法小结
2015/12/01 Javascript
Bootstrap布局组件应用实例讲解
2016/02/17 Javascript
js实现四舍五入完全保留两位小数的方法
2016/08/02 Javascript
详解JS中的快速排序与冒泡
2017/01/10 Javascript
js验证手机号、密码、短信验证码代码工具类
2020/06/24 Javascript
JavaScript对JSON数据进行排序和搜索
2017/07/24 Javascript
JavaScript去掉数组重复项的方法分析【测试可用】
2018/07/19 Javascript
jQuery实现图片简单轮播功能示例
2018/08/13 jQuery
解决微信小程序scroll-view组件无横向滚动的问题
2020/02/04 Javascript
python使用PyV8执行javascript代码示例分享
2013/12/04 Python
python修改注册表终止360进程实例
2014/10/13 Python
python列表操作实例
2015/01/14 Python
python自然语言编码转换模块codecs介绍
2015/04/08 Python
scrapy自定义pipeline类实现将采集数据保存到mongodb的方法
2015/04/16 Python
python3.5 + PyQt5 +Eric6 实现的一个计算器代码
2017/03/11 Python
在Mac下使用python实现简单的目录树展示方法
2018/11/01 Python
Python自动化运维之Ansible定义主机与组规则操作详解
2019/06/13 Python
Python爬虫制作翻译程序的示例代码
2021/02/22 Python
html5中audio支持音频格式的解决方法
2018/08/24 HTML / CSS
SQL面试题
2013/12/09 面试题
程序员机试试题汇总
2012/03/07 面试题
简历中个人自我评价范文
2013/12/26 职场文书
上课迟到检讨书
2014/01/19 职场文书
投标授权委托书范文
2014/08/02 职场文书
2014年财务科工作总结
2014/11/11 职场文书
用Python仅20行代码编写一个简单的端口扫描器
2022/04/08 Python
Redis数据同步之redis shake的实现方法
2022/04/21 Redis
python高温预警数据获取实例
2022/07/23 Python