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 相关文章推荐
JQUERY1.6 使用方法四 检测浏览器
Nov 23 Javascript
jQuery实现个性翻牌效果导航菜单的方法
Mar 09 Javascript
javascript中的Function.prototye.bind
Jun 25 Javascript
jQuery获取浏览器类型和版本号的方法
Jul 05 Javascript
jQuery中JSONP的两种实现方式详解
Sep 26 Javascript
Node.js通过身份证号验证年龄、出生日期与性别方法示例
Mar 09 Javascript
Node.js使用orm2进行update操作时关联字段无法修改的解决方法
Jun 13 Javascript
小程序自定义组件实现城市选择功能
Jul 18 Javascript
JS中call()和apply()的功能及用法实例分析
Jun 28 Javascript
通过实例了解Javascript柯里化流程
Mar 03 Javascript
vue项目页面嵌入代码块vue-prism-editor的实现
Oct 30 Javascript
js中Map和Set的用法及区别实例详解
Feb 15 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
ThinkPHP CURD方法之order方法详解
2014/06/18 PHP
Nginx实现反向代理
2017/09/20 Servers
PHP For循环字母A-Z当超过26个字母时输出AA,AB,AC
2020/02/16 PHP
Nigma vs Liquid BO3 第一场2.13
2021/03/10 DOTA
javascript 当前日期转化为中文的实现代码
2010/05/13 Javascript
jQuery EasyUI 的EasyLoader功能介绍
2010/09/12 Javascript
jquery下动态显示jqGrid以及jqGrid的属性设置容易出现问题的解决方法
2010/10/22 Javascript
jquery 获取自定义属性(attr和prop)的实现代码
2012/06/27 Javascript
如何使用Jquery获取Form表单中被选中的radio值
2013/08/09 Javascript
Ajax请求在数据量大的时候出现超时的解决方法
2014/02/27 Javascript
Jquery validation remote 验证的缓存问题解决方法
2014/03/25 Javascript
基于Bootstrap里面的Button dropdown打造自定义select
2016/05/30 Javascript
Vue.js开发环境搭建
2016/11/10 Javascript
vue-resourse将json数据输出实例
2017/03/08 Javascript
Vue中的v-cloak使用解读
2017/03/27 Javascript
详解js跨域请求的两种方式,支持post请求
2018/05/05 Javascript
webpack4之SplitChunksPlugin使用指南
2018/06/12 Javascript
js canvas实现二维码和图片合成的海报
2020/11/19 Javascript
vue-router命名路由和编程式路由传参讲解
2019/01/19 Javascript
ES6中的class是如何实现的(附Babel编译的ES5代码详解)
2019/05/17 Javascript
让mocha支持ES6模块的方法实现
2020/01/14 Javascript
[35:26]DOTA2上海特级锦标赛B组小组赛#2 VG VS Fnatic第三局
2016/02/26 DOTA
分享python数据统计的一些小技巧
2016/07/21 Python
Python Django使用forms来实现评论功能
2016/08/17 Python
利用Python自动监控网站并发送邮件告警的方法
2016/08/24 Python
python交互式图形编程实例(一)
2017/11/17 Python
python爬取哈尔滨天气信息
2018/07/14 Python
django 实现后台从富文本提取纯文本
2020/07/02 Python
python中把元组转换为namedtuple方法
2020/12/09 Python
Marriott中国:万豪国际酒店查询预订
2016/09/02 全球购物
党校自我鉴定范文
2013/10/02 职场文书
会计专业求职信范文
2014/03/16 职场文书
艺术设计专业个人求职信
2014/04/10 职场文书
党的群众路线教育实践活动个人批评与自我批评
2014/10/16 职场文书
财务负责人岗位职责
2015/02/03 职场文书
早恋主题班会
2015/08/14 职场文书