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 对象定义方法 简单易学
Mar 22 Javascript
Jquery中显示隐藏的实现代码分析
Jul 26 Javascript
JavaScript代码复用模式实例分析
Dec 02 Javascript
jquery实现手机发送验证码的倒计时代码
Feb 12 Javascript
JavaScript内存管理介绍
Mar 13 Javascript
jQuery使用each方法与for语句遍历数组示例
Jun 16 Javascript
jQuery File Upload文件上传插件使用详解
Dec 06 Javascript
Node.js之网络通讯模块实现浅析
Apr 01 Javascript
用react-redux实现react组件之间数据共享的方法
Jun 08 Javascript
通过扫小程序码实现网站登陆功能
Aug 22 Javascript
使用xampp将angular项目运行在web服务器的教程
Sep 16 Javascript
vue 组件基础知识总结
Jan 26 Vue.js
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生成静态页面分析 模板+缓存+写文件
2009/08/17 PHP
PHP下获取上个月、下个月、本月的日期(strtotime,date)
2014/02/02 PHP
php面向对象之反射功能与用法分析
2017/03/29 PHP
PHP7多线程搭建教程
2017/04/21 PHP
PHP处理bmp格式图片的方法分析
2017/07/04 PHP
php+Ajax处理xml与json格式数据的方法示例
2019/03/04 PHP
Prototype 学习 Prototype对象
2009/07/12 Javascript
js控制的回到页面顶端goTop的代码实现
2013/03/20 Javascript
查询json的数据结构的8种方式简介
2014/03/10 Javascript
原生JS实现响应式瀑布流布局
2015/04/02 Javascript
详解JavaScript 中的 replace 方法
2016/01/01 Javascript
在IE8上JS实现combobox支持拼音检索功能
2016/05/23 Javascript
利用jQuery的动画函数animate实现豌豆发射效果
2016/08/28 Javascript
js图片延迟加载(Lazyload)三种实现方式
2017/03/01 Javascript
vue操作动画的记录animate.css实例代码
2019/04/26 Javascript
微信小程序上传文件到阿里OSS教程
2019/05/20 Javascript
JS根据Unix时间戳显示发布时间是多久前【项目实测】
2019/07/10 Javascript
[01:32]2016国际邀请赛中国区预选赛CDEC战队教练采访
2016/06/26 DOTA
python改变日志(logging)存放位置的示例
2014/03/27 Python
Python中执行存储过程及获取存储过程返回值的方法
2017/10/07 Python
Python常见MongoDB数据库操作实例总结
2018/07/24 Python
使用pycharm设置控制台不换行的操作方法
2019/01/19 Python
Pandas中resample方法详解
2019/07/02 Python
新手入门Python编程的8个实用建议
2019/07/12 Python
Tensorflow 卷积的梯度反向传播过程
2020/02/10 Python
Tomcat中怎么使用log4j输出所有的log
2016/07/07 面试题
新学期教师寄语
2014/04/02 职场文书
地球一小时倡议书
2014/04/15 职场文书
2014年办公室工作总结范文
2014/11/12 职场文书
优秀班集体事迹材料
2014/12/25 职场文书
五四青年节活动总结
2015/02/10 职场文书
离婚起诉状范本
2015/05/19 职场文书
教师考核鉴定意见
2015/06/05 职场文书
初一英语教学反思
2016/02/15 职场文书
Html5通过数据流方式播放视频的实现
2021/04/27 HTML / CSS
MySQL数字类型自增的坑
2021/05/07 MySQL