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 相关文章推荐
对JavaScript的eval()中使用函数的进一步讨论
Jul 26 Javascript
JQuery实现表格中相同单元格合并示例代码
Jun 26 Javascript
jQuery实现的淡入淡出二级菜单效果代码
Sep 15 Javascript
JS制作类似选项卡切换的年历
Dec 03 Javascript
javascript基于原型链的继承及call和apply函数用法分析
Dec 15 Javascript
angularJS模态框$modal实例代码
May 27 Javascript
bootstrap表格内容过长时用省略号表示的解决方法
Nov 21 Javascript
vue+element-ui集成随机验证码+用户名+密码的form表单验证功能
Aug 05 Javascript
QRCode.js二维码生成并能长按识别
Oct 16 Javascript
vue组件系列之TagsInput详解
May 14 Javascript
Vue实现简单购物车功能
Dec 13 Vue.js
原生js实现自定义难度的扫雷游戏
Jan 22 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 前一天或后一天的日期
2008/06/28 PHP
PHP中余数、取余的妙用
2015/06/29 PHP
PHP中常见的缓存技术实例分析
2015/09/23 PHP
PHP编写登录验证码功能 附调用方法
2016/05/19 PHP
实现PHP搜索加分页
2016/10/12 PHP
php分享朋友圈的实现代码
2019/02/18 PHP
php ActiveMQ的安装与使用方法图文教程
2020/02/23 PHP
PHP sdk文档处理常用代码示例解析
2020/12/09 PHP
用js一次改变多个input的readonly属性值的方法
2014/06/11 Javascript
javascript实现可全选、反选及删除表格的方法
2015/05/15 Javascript
在JavaScript中使用开平方根的sqrt()方法
2015/06/15 Javascript
jQuery实现可移动选项的左右下拉列表示例
2016/12/26 Javascript
详解vue-cli快速构建项目以及引入bootstrap、jq
2017/05/26 Javascript
对mac下nodejs 更新到最新版本的最新方法(推荐)
2018/05/17 NodeJs
微信小程序纯文本实现@功能
2020/04/08 Javascript
python链接Oracle数据库的方法
2015/06/28 Python
python如何通过twisted实现数据库异步插入
2018/03/20 Python
python实战教程之自动扫雷
2018/07/13 Python
Python 判断文件或目录是否存在的实例代码
2018/07/19 Python
Python爬虫常用库的安装及其环境配置
2018/09/19 Python
Python爬虫分析微博热搜关键词的实现代码
2021/02/22 Python
布鲁明戴尔百货店:Bloomingdale’s
2016/12/21 全球购物
Berghaus官网:户外服装和设备,防水服
2020/01/17 全球购物
.NET面试问题集
2015/12/08 面试题
大学生自我鉴定
2013/12/16 职场文书
师范院校学生自荐信范文
2013/12/27 职场文书
《愚公移山》教学反思
2014/02/20 职场文书
欢迎新生标语
2014/10/06 职场文书
2014年政府采购工作总结
2014/12/09 职场文书
2015年党风建设工作总结
2015/04/29 职场文书
离婚案件上诉状
2015/05/23 职场文书
酒店温馨提示语
2015/07/14 职场文书
2015年学校办公室主任工作总结
2015/07/20 职场文书
赞助商致辞
2015/07/30 职场文书
Python爬虫之爬取某文库文档数据
2021/04/21 Python
Nginx+Windows搭建域名访问环境的操作方法
2022/03/17 Servers