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实现的所谓的滑动门
May 23 Javascript
JQuery Tips(4) 一些关于提高JQuery性能的Tips
Dec 19 Javascript
Javascript aop(面向切面编程)之around(环绕)分析
May 01 Javascript
JS数组排序技巧汇总(冒泡、sort、快速、希尔等排序)
Nov 24 Javascript
jquery显示隐藏元素的实现代码
May 19 Javascript
jQuery实现的表头固定效果实例【附完整demo源码下载】
Aug 01 Javascript
深入浅析search 搜索框的写法
Aug 02 Javascript
深入理解AngularJS中的ng-bind-html指令
Mar 27 Javascript
javascript闭包功能与用法实例分析
Apr 06 Javascript
JS+HTML5 FileReader实现文件上传前本地预览功能
Mar 27 Javascript
关于Layui Table隐藏列问题
Sep 16 Javascript
JavaScript this关键字的深入详解
Jan 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
深入理解PHP中的global
2014/08/19 PHP
php字符串按照单词进行反转的方法
2015/03/14 PHP
PHP中把对象数组转换成普通数组的方法
2015/07/10 PHP
javascript 面向对象编程  function是方法(函数)
2009/09/17 Javascript
基于KMP算法JavaScript的实现方法分析
2013/05/03 Javascript
JQuery实现表格中相同单元格合并示例代码
2013/06/26 Javascript
原生js和jQuery写的网页选项卡特效对比
2015/04/27 Javascript
利用jquery获取select下拉框的值
2016/11/23 Javascript
解析预加载显示图片艺术
2016/12/05 Javascript
JavaScript实现简单精致的图片左右无缝滚动效果
2017/03/16 Javascript
简单理解Vue中的nextTick方法
2018/01/30 Javascript
js将键值对字符串转为json字符串的方法
2018/03/30 Javascript
Python中让MySQL查询结果返回字典类型的方法
2014/08/22 Python
python通过邮件服务器端口发送邮件的方法
2015/04/30 Python
python脚本爬取字体文件的实现方法
2017/04/29 Python
python实现的二叉树定义与遍历算法实例
2017/06/30 Python
python爬虫爬取快手视频多线程下载功能
2018/02/28 Python
TensorFlow实现Softmax回归模型
2018/03/09 Python
python3中的md5加密实例
2018/05/29 Python
Python之两种模式的生产者消费者模型详解
2018/10/26 Python
Python中的Socket 与 ScoketServer 通信及遇到问题解决方法
2019/04/01 Python
pandas 数据索引与选取的实现方法
2019/06/21 Python
python-Web-flask-视图内容和模板知识点西宁街
2019/08/23 Python
对python中assert、isinstance的用法详解
2019/11/27 Python
python隐藏类中属性的3种实现方法
2019/12/19 Python
tensorflow使用range_input_producer多线程读取数据实例
2020/01/20 Python
python help函数实例用法
2020/12/06 Python
AmazeUI中模态框的实现
2020/08/19 HTML / CSS
美国专业消费电子及摄影器材网站:B&H Photo Video
2019/12/18 全球购物
上班看电影检讨书
2014/02/12 职场文书
2014年班主任自我评价范文
2014/04/23 职场文书
小升初自荐信范文
2015/03/05 职场文书
妈妈别哭观后感
2015/06/08 职场文书
2015年音乐教研组工作总结
2015/07/22 职场文书
运动会开幕式致辞
2015/07/29 职场文书
2019最新企业员工考勤管理制度(通用版)!
2019/07/02 职场文书