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 相关文章推荐
JS截取字符串常用方法详细整理
Oct 28 Javascript
js实现文章文字大小字号功能完整实例
Nov 01 Javascript
在HTML中插入JavaScript代码的示例
Jun 03 Javascript
javascript简单比较日期大小的方法
Jan 05 Javascript
浅析JavaScript中浏览器的兼容问题
Apr 19 Javascript
jQuery实现页面评论栏中访客信息自动填写功能的方法
May 23 Javascript
使用jQuery判断浏览器滚动条位置的方法
May 30 Javascript
基于JS模仿windows文件按名称排序效果
Jun 29 Javascript
AngularJS优雅的自定义指令
Jul 01 Javascript
Mvc提交表单的四种方法全程详解
Aug 10 Javascript
基于dataset的使用和图片延时加载的实现方法
Dec 11 Javascript
详解angular部署到iis出现404解决方案
Aug 14 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
在PHP3中实现SESSION的功能(三)
2006/10/09 PHP
PHP执行速率优化技巧小结
2008/03/15 PHP
php简单对象与数组的转换函数代码(php多层数组和对象的转换)
2011/05/18 PHP
PHP+MySQL投票系统的设计和实现分享
2012/09/23 PHP
Session 失效的原因汇总及解决丢失办法
2015/09/30 PHP
PHP5.3新特性小结
2016/02/14 PHP
利用Homestead快速运行一个Laravel项目的方法详解
2017/11/14 PHP
原来Jquery.load的方法可以一直load下去
2011/03/28 Javascript
jQuery 获取浏览器所在的IP地址的小例子
2013/11/08 Javascript
深入理解Javascript中的循环优化
2013/11/09 Javascript
jquery内置验证(validate)使用方法示例(表单验证)
2013/12/04 Javascript
推荐9款炫酷的基于jquery的页面特效
2014/12/07 Javascript
jquery使用hide方法隐藏指定id的元素
2015/03/30 Javascript
JQuery工具函数汇总
2015/06/15 Javascript
php基于redis处理session的方法
2016/03/14 Javascript
基于javascript显示当前时间以及倒计时功能
2016/03/18 Javascript
js 实现一些跨浏览器的事件方法详解及实例
2016/10/27 Javascript
AngularJS过滤器filter用法分析
2016/12/11 Javascript
JS实现物体带缓冲的间歇运动效果示例
2016/12/22 Javascript
React组件之间的通信的实例代码
2017/06/27 Javascript
Nodejs封装类似express框架的路由实例详解
2020/01/05 NodeJs
详解uniapp的全局变量实现方式
2021/01/11 Javascript
[01:32]2016国际邀请赛中国区预选赛IG战队首日赛后采访
2016/06/27 DOTA
Python实现删除时保留特定文件夹和文件的示例
2018/04/27 Python
Python实现的对一个数进行因式分解操作示例
2019/06/27 Python
基于Python脚本实现邮件报警功能
2020/05/20 Python
Wiggle中国:英国骑行、跑步、游泳 & 铁三运动装备专卖网店
2016/08/02 全球购物
介绍一下Java中的static关键字
2012/05/12 面试题
轻金属冶金专业毕业生自荐信
2013/11/02 职场文书
专科应届生求职信
2013/11/24 职场文书
群众路线教育实践活动方案
2014/02/02 职场文书
档案工作个人总结
2015/03/03 职场文书
会议新闻稿
2015/07/17 职场文书
24年收藏2000多部退役军用电台
2022/02/18 无线电
Python采集爬取京东商品信息和评论并存入MySQL
2022/04/12 Python
MySQL三种方式实现递归查询
2022/04/18 MySQL