jQuery动画效果animate和scrollTop结合使用实例


Posted in Javascript onApril 02, 2014

CSS属性值是逐渐改变的,这样就可以创建动画效果。
只有数字值可创建动画(比如 "margin:30px")。
字符串值无法创建动画(比如 "background-color:red")。

$('#shang').click(function(){$('html,body').animate({scrollTop: '0px'}, 800);});

上面的代码表示滚动条跳到0的位置,页面移动速度是800。
结合scrollTop实用示例:
jQuery(document).ready(function($){
 $('#shang').click(function(){
  $('html,body').animate({scrollTop: '0px'}, 800);
 });
 $('#comt').click(function(){
  $('html,body').animate({scrollTop:$('#comments').offset().top}, 800);
 });
 $('#xia').click(function(){
  $('html,body').animate({scrollTop:$('#footer').offset().top}, 800);
 });
});

表示点击相关ID移动到指定位置:
点击ID为shang的元素,回到顶部;
点击ID为comt的元素,回到ID为comments的位置;
点击ID为xia的元素,回到底部;
Javascript 相关文章推荐
JavaScript 继承详解(三)
Jul 13 Javascript
Extjs学习笔记之九 数据模型(上)
Jan 11 Javascript
javascript错误的认识不用关心内存管理
Dec 15 Javascript
JavaScript中setInterval的用法总结
Nov 20 Javascript
javascript如何创建表格(javascript绘制表格的二种方法)
Dec 10 Javascript
在线所见即所得HTML编辑器的实现原理浅析
Apr 25 Javascript
使用AngularJS实现可伸缩的页面切换的方法
Jun 19 Javascript
EasyUI 中combotree 默认不能选择父节点的实现方法
Nov 07 Javascript
JS简单获取当前日期时间的方法(如:2017-03-29 11:41:10 星期四)
Mar 29 Javascript
JS实现前端缓存的方法
Sep 21 Javascript
微信小程序之数据缓存的实例详解
Sep 29 Javascript
JavaScript parseInt0.0000005打印5原理解析
Jul 23 Javascript
Jquery实现侧边栏跟随滚动条固定(兼容IE6)
Apr 02 #Javascript
用于deeplink的js方法(判断手机是否安装app)
Apr 02 #Javascript
动态显示可输入的字数提示还可以输入的字数
Apr 01 #Javascript
自己实现ajax封装示例分享
Apr 01 #Javascript
jquery分页对象使用示例
Apr 01 #Javascript
JavaScript对象的property属性详解
Apr 01 #Javascript
easyui datagrid 键盘上下控制选中行示例
Mar 31 #Javascript
You might like
通过对php一些服务器端特性的配置加强php的安全
2006/10/09 PHP
轻松修复Discuz!数据库
2008/05/03 PHP
PHP在引号前面添加反斜杠(PHP去除反斜杠)
2013/09/28 PHP
PHP static局部静态变量和全局静态变量总结
2014/03/02 PHP
Ubuntu下安装PHP的mongodb扩展操作命令
2015/07/04 PHP
PHP Swoole异步读取、写入文件操作示例
2019/10/24 PHP
js中关于一个分号的崩溃示例
2013/11/11 Javascript
jquery删除提示框弹出是否删除对话框
2014/01/07 Javascript
JS组件Form表单验证神器BootstrapValidator
2016/01/26 Javascript
Bootstrap项目实战之首页内容介绍(全)
2016/04/25 Javascript
Ionic实现页面下拉刷新(ion-refresher)功能代码
2016/06/03 Javascript
jQuery图片左右滚动代码 有左右按钮实例
2016/06/20 Javascript
微信小程序 wxapp内容组件 icon详细介绍
2016/10/31 Javascript
详解vue-Resource(与后端数据交互)
2017/01/16 Javascript
详解react如何在组件中获取路由参数
2017/06/15 Javascript
JavaScript自执行函数和jQuery扩展方法详解
2017/10/27 jQuery
细说webpack源码之compile流程-rules参数处理技巧(1)
2017/12/26 Javascript
JS实现获取数组中最大值或最小值功能示例
2019/03/02 Javascript
jQuery实现input输入框获取焦点与失去焦点时提示的消失与显示功能示例
2019/05/27 jQuery
node express使用HTML模板的方法示例
2019/08/22 Javascript
vue 中 elment-ui table合并上下两行相同数据单元格
2019/12/26 Javascript
node.js中 mysql 增删改查操作及async,await处理实例分析
2020/02/11 Javascript
python通过scapy获取局域网所有主机mac地址示例
2014/05/04 Python
python自动化测试实例解析
2014/09/28 Python
python同时遍历数组的索引和值的实例
2018/11/15 Python
Django3.0 异步通信初体验(小结)
2019/12/04 Python
python logging.basicConfig不生效的原因及解决
2020/02/20 Python
Pycharm在指定目录下生成文件和删除文件的实现
2020/12/28 Python
大都会艺术博物馆商店:The Met Store
2018/06/22 全球购物
路由表示做什么用的?在linux环境中怎么来配置一条默认路由?
2013/06/07 面试题
EJB实例的生命周期
2016/10/28 面试题
十岁生日父母答谢词
2014/01/18 职场文书
期末自我鉴定
2014/01/23 职场文书
电子信息工程专业求职信
2014/06/28 职场文书
分公司总经理岗位职责
2014/08/03 职场文书
小学生美德少年事迹材料
2014/08/24 职场文书