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 相关文章推荐
索趣科技的答案
Feb 07 Javascript
jQuery调用WebService的实现代码
Jun 19 Javascript
javascript中键盘事件用法实例分析
Jan 30 Javascript
论Bootstrap3和Foundation5网格系统的异同
May 16 Javascript
jQuery对checkbox 复选框的全选全不选反选的操作
Aug 09 Javascript
jquery uploadify如何取消已上传成功文件
Feb 08 Javascript
ES6数组与对象的解构赋值详解
Jun 14 Javascript
angularjs请求数据的方法示例
Aug 06 Javascript
vue实现在v-html的html字符串中绑定事件
Oct 28 Javascript
修改vue源码实现动态路由缓存的方法
Jan 21 Javascript
js实现贪吃蛇小游戏(加墙)
Jul 31 Javascript
ReactRouter的实现方法
Jan 25 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
ExtJS的FieldSet的column列布局
2009/11/20 Javascript
读jQuery之八 包装事件对象
2011/06/21 Javascript
jquery中.add()的使用分析
2013/04/26 Javascript
node.js入门教程迷你书、node.js入门web应用开发完全示例
2014/04/06 Javascript
js读取csv文件并使用json显示出来
2015/01/09 Javascript
简化版手机端照片预览组件
2015/04/13 Javascript
javascript实现实时输出当前的时间
2015/04/27 Javascript
基于jquery实现简单的分页控件
2016/03/17 Javascript
AngularJS变量及过滤器Filter用法分析
2016/11/22 Javascript
vue-router2.0 组件之间传参及获取动态参数的方法
2017/11/10 Javascript
Vue中添加手机验证码组件功能操作方法
2017/12/07 Javascript
详解vue-cli官方脚手架配置
2018/07/20 Javascript
vue中如何实现后台管理系统的权限控制的方法步骤
2019/09/05 Javascript
JavaScript提升机制Hoisting详解
2019/10/23 Javascript
vuex实现像调用模板方法一样调用Mutations方法
2019/11/06 Javascript
Postman环境变量全局变量使用方法详解
2020/08/13 Javascript
[04:07]显微镜下的DOTA2第八期——英雄复活动作
2014/06/24 DOTA
Python psutil模块简单使用实例
2015/04/28 Python
详解Python中的条件判断语句
2015/05/14 Python
python变量的存储原理详解
2019/07/10 Python
Python实现密码薄文件读写操作
2019/12/16 Python
python 实用工具状态机transitions
2020/11/21 Python
移动端Html5页面生成图片解决方案
2018/08/07 HTML / CSS
SEPHORA新西兰官方网站:购买化妆品和护肤品
2016/12/02 全球购物
法国娇韵诗官方旗舰店:Clarins是来自法国的天然护肤品牌
2018/06/30 全球购物
网站设计师的岗位职责
2013/11/21 职场文书
员工晚婚的请假条
2014/02/08 职场文书
意向书范文
2014/03/31 职场文书
停车位租赁协议书
2014/09/24 职场文书
考试作弊被抓检讨书
2014/10/02 职场文书
银行贷款收入证明
2014/10/17 职场文书
打架赔偿协议书范本
2014/10/26 职场文书
2014年幼儿园工作总结
2014/11/10 职场文书
中层干部考核评语
2015/01/04 职场文书
开业庆典致辞
2015/08/01 职场文书
实例讲解Python中sys.argv[]的用法
2021/06/03 Python