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 版
Mar 24 Javascript
SWFObject Flash js调用类
Jul 08 Javascript
基于jquery的获取浏览器窗口大小的代码
Mar 28 Javascript
js jquery验证银行卡号信息正则学习
Jan 21 Javascript
js 自制滚动条的小例子
Mar 16 Javascript
JQuery中serialize()用法实例分析
Feb 06 Javascript
JS实现自适应高度表单文本框的方法
Feb 25 Javascript
javascript实现当前页导航激活的方法
Feb 27 Javascript
JavaScript排序算法动画演示效果的实现方法
Oct 18 Javascript
js实现二级菜单点击显示当前内容效果
Apr 28 Javascript
vue生命周期与钩子函数简单示例
Mar 13 Javascript
解决layui数据表格Date日期格式的回显Object的问题
Sep 19 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统计文件大小,以GB、MB、KB、B输出
2011/05/29 PHP
基于php中使用excel的简单介绍
2013/08/02 PHP
php中函数前加&符号的作用分解
2014/07/08 PHP
php微信支付接口开发程序
2016/08/02 PHP
Laravel接收前端ajax传来的数据的实例代码
2017/07/20 PHP
Js-$.extend扩展方法使方法参数更灵活
2013/01/15 Javascript
纯JS实现五子棋游戏兼容各浏览器(附源码)
2013/04/24 Javascript
深入解析contentWindow, contentDocument
2013/07/04 Javascript
JS性能优化笔记搜索整理
2013/08/21 Javascript
jQuery 浮动导航菜单适合购物商品类型的网站
2014/09/09 Javascript
取得元素的左和上偏移量的方法
2014/09/17 Javascript
js 加密压缩出现bug解决方案
2014/11/25 Javascript
js获取时间并实现字符串和时间戳之间的转换
2015/01/05 Javascript
JavaScript实现选择框按比例拖拉缩放的方法
2015/08/04 Javascript
jQuery的文档处理程序详解
2016/05/10 Javascript
jQuery.Uploadify插件实现带进度条的批量上传功能
2016/06/08 Javascript
angularjs 源码解析之scope
2016/08/22 Javascript
Vue AST源码解析第一篇
2017/07/19 Javascript
[44:21]Ti4 循环赛第四日 附加赛NEWBEE vs LGD
2014/07/13 DOTA
python实现的各种排序算法代码
2013/03/04 Python
关于python写入文件自动换行的问题
2018/06/23 Python
python读取LMDB中图像的方法
2018/07/02 Python
简单了解python中的f.b.u.r函数
2019/11/02 Python
Java byte数组操纵方式代码实例解析
2020/07/22 Python
python 常见的反爬虫策略
2020/09/27 Python
CSS3实现歌词进度文字颜色填充变化动态效果的思路详解
2020/06/02 HTML / CSS
html5使用canvas绘制文字特效
2014/12/15 HTML / CSS
暑假实习求职信范文
2013/09/22 职场文书
公司部门司机岗位职责
2014/01/03 职场文书
《玩具柜台前的孩子》教学反思
2014/02/13 职场文书
社区党务公开实施方案
2014/03/18 职场文书
学术诚信承诺书
2014/05/26 职场文书
大学生撤销处分思想汇报
2014/09/12 职场文书
党员查摆剖析材料
2014/10/10 职场文书
论文评审意见
2015/06/05 职场文书
Python中time标准库的使用教程
2022/04/13 Python