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 相关文章推荐
使用jQuery Ajax功能时需要注意的一个问题(内存溢出)
May 30 Javascript
js、css、img等浏览器缓存问题的2种解决方案
Oct 23 Javascript
浅析Javascript中“==”与“===”的区别
Dec 23 Javascript
Jquery ajax 同步阻塞引起的UI线程阻塞问题
Nov 17 Javascript
javascript解决小数的加减乘除精度丢失的方案
May 31 Javascript
教你用十行node.js代码读取docx的文本
Mar 08 Javascript
ionic App问题总结系列之ionic点击系统返回键退出App
Aug 19 Javascript
在vue-cli搭建的项目中增加后台mock接口的方法
Apr 26 Javascript
微信小程序wepy框架笔记小结
Aug 08 Javascript
详解Vue开发微信H5微信分享签名失败问题解决方案
Aug 09 Javascript
Node.js npm命令运行node.js脚本的方法
Oct 10 Javascript
vue 更改连接后台的api示例
Nov 11 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/07/27 PHP
php下目前为目最全的CURL中文说明
2010/08/01 PHP
CI框架源码阅读,系统常量文件constants.php的配置
2013/02/28 PHP
php+ajax登录跳转登录实现思路
2016/07/31 PHP
PHP实现无限极分类的两种方式示例【递归和引用方式】
2019/03/25 PHP
javascript获取隐藏元素(display:none)的高度和宽度的方法
2014/06/06 Javascript
JavaScript中的console.time()函数详细介绍
2014/12/29 Javascript
jQuery验证插件validation使用指南
2015/04/21 Javascript
深入探秘jquery瀑布流的实现
2016/01/30 Javascript
创建一个类Person的简单实例
2016/05/17 Javascript
Vue.js一个文件对应一个组件实践
2016/10/27 Javascript
Avalonjs 实现简单购物车功能(实例代码)
2017/02/07 Javascript
JavaScript观察者模式(publish/subscribe)原理与实现方法
2017/03/30 Javascript
vue项目中公用footer组件底部位置的适配问题
2018/05/10 Javascript
JS与jQuery判断文本框还剩多少字符可以输入的方法
2018/09/01 jQuery
微信小程序—setTimeOut定时器的问题及解决
2019/07/26 Javascript
Vue实现购物车详情页面的方法
2019/08/20 Javascript
在Vue 中实现循环渲染多个相同echarts图表
2020/07/20 Javascript
python实现监控linux性能及进程消耗性能的方法
2014/07/25 Python
Python入门篇之字符串
2014/10/17 Python
Python根据文件名批量转移图片的方法
2018/10/21 Python
python实现将字符串中的数字提取出来然后求和
2020/04/02 Python
Python+Django+MySQL实现基于Web版的增删改查的示例代码
2020/05/13 Python
对Keras中predict()方法和predict_classes()方法的区别说明
2020/06/09 Python
使用keras实现孪生网络中的权值共享教程
2020/06/11 Python
Python闭包装饰器使用方法汇总
2020/06/29 Python
Python 生成短8位唯一id实战教程
2021/01/13 Python
新百伦折扣店:Joe’s New Balance Outlet
2016/08/20 全球购物
Hotels.com印度:酒店预订
2019/05/11 全球购物
财产公证书样本
2014/04/04 职场文书
五四青年节的活动方案
2014/08/20 职场文书
标准单位租车协议书
2014/09/23 职场文书
领导班子党的群众路线教育实践活动对照检查材料
2014/09/25 职场文书
导师对论文的学术评语
2015/01/04 职场文书
nginx之queue的具体使用
2022/06/28 Servers
源码安装apache脚本部署过程详解
2022/09/23 Servers