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 相关文章推荐
二级域名转向类
Nov 09 Javascript
js 替换
Feb 19 Javascript
利用jQuery插件扩展识别浏览器内核与外壳的类型和版本的实现代码
Oct 22 Javascript
利用try-catch判断变量是已声明未声明还是未赋值
Mar 12 Javascript
jQuery简单tab切换效果实现方法
Apr 08 Javascript
Angular Js文件上传之form-data
Aug 28 Javascript
SublimeText自带格式化代码功能之reindent
Dec 27 Javascript
JS遍历数组及打印数组实例分析
Jan 21 Javascript
js获取元素的外链样式的简单实现方法
Jun 06 Javascript
CSS3 3D 技术手把手教你玩转
Sep 02 Javascript
Ionic学习日记实现验证码倒计时
Feb 08 Javascript
JavaScript的垃圾回收机制与内存管理
Aug 06 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程序中使用Rust扩展的方法
2015/07/03 PHP
Symfony2使用第三方库Upload制作图片上传实例详解
2016/02/04 PHP
Symfony的安装和配置方法
2016/03/17 PHP
php array_keys 返回数组的键名
2016/10/25 PHP
AJAX的使用方法详解
2017/04/29 PHP
php curl上传、下载、https登陆实现代码
2017/07/23 PHP
jquery 提交值不为空的元素示例代码
2013/05/10 Javascript
怎么清空javascript数组
2013/05/11 Javascript
js实现的tab标签切换效果代码分享
2015/08/25 Javascript
jQuery入门之层次选择器实例简析
2015/12/11 Javascript
Javascript复制实例详解
2016/01/28 Javascript
Jquery $when done then的用法详解
2016/05/20 Javascript
vue.js开发环境搭建教程
2017/05/04 Javascript
Angular 4 指令快速入门教程
2017/06/07 Javascript
详解使用Vue Router导航钩子与Vuex来实现后退状态保存
2017/09/11 Javascript
vue封装一个简单的div框选时间的组件的方法
2019/01/06 Javascript
JS面向对象编程基础篇(二) 封装操作实例详解
2020/03/03 Javascript
Node.js文本文件BOM头的去除方法
2020/11/22 Javascript
JS实现纸牌发牌动画
2021/01/19 Javascript
python中cPickle用法例子分享
2014/01/03 Python
python中实现定制类的特殊方法总结
2014/09/28 Python
用Python进行一些简单的自然语言处理的教程
2015/03/31 Python
Python使用Srapy框架爬虫模拟登陆并抓取知乎内容
2016/07/02 Python
python3.6 实现AES加密的示例(pyCryptodome)
2018/01/10 Python
pandas or sql计算前后两行数据间的增值方法
2018/04/20 Python
python版大富翁源代码分享
2018/11/19 Python
Django中使用haystack+whoosh实现搜索功能
2019/10/08 Python
python自动点赞功能的实现思路
2020/02/26 Python
python导入库的具体方法
2020/06/18 Python
html5 Canvas画图教程(1)—画图的基本常识
2013/01/09 HTML / CSS
盖尔斯工厂店:GUESS Factory
2020/01/21 全球购物
大学生毕业求职找工作的自我评价
2013/09/29 职场文书
英语专业毕业生自荐信
2013/10/28 职场文书
公司行政经理岗位职责
2013/12/24 职场文书
小学运动会宣传稿
2015/07/23 职场文书
python基础详解之if循环语句
2021/04/24 Python