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 相关文章推荐
js不是基础的基础
Dec 24 Javascript
Jquery从头学起第四讲 jquery入门教程
Aug 01 Javascript
JavaScript判断DOM何时加载完毕的技巧
Nov 11 Javascript
JS获取图片高度宽度的方法分享
Apr 17 Javascript
jquery实现弹出层登录和全屏层注册特效
Aug 28 Javascript
深入浅析Extjs中store分组功能的使用方法
Apr 20 Javascript
jQuery Easyui Tabs扩展根据自定义属性打开页签
Aug 15 Javascript
VueCli3构建TS项目的方法步骤
Nov 07 Javascript
Angular如何由模板生成DOM树的方法
Dec 23 Javascript
6种JavaScript继承方式及优缺点(小结)
Feb 06 Javascript
JavaScript实现密码强度实时验证
Mar 18 Javascript
SSM VUE Axios详解
Oct 05 Vue.js
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定时自动生成静态HTML的实现代码
2010/06/20 PHP
php中Y2K38的漏洞解决方法实例分析
2014/09/22 PHP
PHP开启opcache提升代码性能
2015/04/26 PHP
php使用redis的几种常见操作方式和用法示例
2020/02/20 PHP
PHP设计模式(六)桥连模式Bridge实例详解【结构型】
2020/05/02 PHP
javascript document.compatMode兼容性
2010/02/23 Javascript
JavaScript在多浏览器下for循环的使用方法
2012/11/07 Javascript
JS打开新窗口的2种方式
2013/04/18 Javascript
JQuery异步获取返回值中文乱码的解决方法
2015/01/29 Javascript
js 打开新页面在屏幕中间的实现方法
2016/11/02 Javascript
详解vue.js组件化开发实践
2016/12/14 Javascript
JS原型与原型链的深入理解
2017/02/15 Javascript
js实现各浏览器全屏代码实例
2018/07/03 Javascript
解决vue中post方式提交数据后台无法接收的问题
2018/08/11 Javascript
脚手架vue-cli工程webpack的基本用法详解
2018/09/29 Javascript
vue-cli3.0 环境变量与模式配置方法
2018/11/08 Javascript
js+HTML5 canvas 实现简单的加载条(进度条)功能示例
2019/07/16 Javascript
利用PHP实现递归删除链表元素的方法示例
2020/10/23 Javascript
[44:21]Ti4 循环赛第四日 附加赛NEWBEE vs LGD
2014/07/13 DOTA
[01:04]DOTA2:伟大的Roshan雕塑震撼来临
2015/01/30 DOTA
[36:41]完美世界DOTA2联赛循环赛FTD vs Magma第一场 10月30日
2020/10/31 DOTA
python中文乱码的解决方法
2013/11/04 Python
python Spyder界面无法打开的解决方法
2018/04/27 Python
python 根据时间来生成唯一的字符串方法
2019/01/14 Python
详解Python 调用C# dll库最简方法
2019/06/20 Python
python threading和multiprocessing模块基本用法实例分析
2019/07/25 Python
Python实现JS解密并爬取某音漫客网站
2020/10/23 Python
La Senza官网:北美顶尖性感内衣品牌
2018/08/03 全球购物
优秀求职自荐信怎样写
2013/12/18 职场文书
党员公开承诺践诺书
2014/03/25 职场文书
优秀员工评优方案
2014/06/13 职场文书
学校个人对照检查材料
2014/08/26 职场文书
离婚起诉书范本
2015/05/18 职场文书
行政处罚决定书
2015/06/24 职场文书
python 批量压缩图片的脚本
2021/06/02 Python
Python使用openpyxl批量处理数据
2021/06/23 Python