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 相关文章推荐
基于jquery的超简单上下翻
Apr 20 Javascript
jWiard 基于JQuery的强大的向导控件介绍
Oct 28 Javascript
js加强的经典分页实例
Mar 15 Javascript
JS定时器实例详细分析
Oct 11 Javascript
AngularJS的一些基本样式初窥
Jul 27 Javascript
jQuery短信验证倒计时功能实现方法详解
May 25 Javascript
基于JQuery的Ajax方法使用详解
Aug 16 jQuery
vue 粒子特效的示例代码
Sep 19 Javascript
JavaScript比较同一天的时间大小实例代码
Feb 09 Javascript
判断文字超过2行添加展开按钮,未超过则不显示,溢出部分显示省略号
Apr 28 Javascript
详解js location.href和window.open的几种用法和区别
Dec 02 Javascript
Vue CLI4 Vue.config.js标准配置(最全注释)
Jun 05 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以及MYSQL日期比较方法
2012/11/29 PHP
关于JSON以及JSON在PHP中的应用技巧
2013/11/27 PHP
php创建sprite
2014/02/11 PHP
PHP框架Laravel中实现supervisor执行异步进程的方法
2017/06/07 PHP
在云虚拟主机部署thinkphp5项目的步骤详解
2017/12/21 PHP
10个新的最有前途的JavaScript框架
2009/03/12 Javascript
jQuery.prototype.init选择器构造函数源码思路分析
2013/02/05 Javascript
javascript折半查找详解
2015/01/26 Javascript
jQuery实现多级下拉菜单jDropMenu的方法
2015/08/28 Javascript
jQuery实现简单的DIV拖动效果
2016/02/19 Javascript
jQuery的文档处理程序详解
2016/05/10 Javascript
全面解析多种Bootstrap图片轮播效果
2016/05/27 Javascript
使用jQuery的toggle()方法对HTML标签进行显示、隐藏的方法(示例)
2016/09/01 Javascript
js实时获取窗口大小变化的实例代码
2016/11/18 Javascript
收藏AngularJS中最重要的核心功能
2017/07/09 Javascript
async/await地狱该如何避免详解
2018/05/10 Javascript
Node.js EventEmmitter事件监听器用法实例分析
2019/01/07 Javascript
bootstrap tooltips在 angularJS中的使用方法
2019/04/10 Javascript
Vue.js如何使用Socket.IO的示例代码
2019/09/05 Javascript
Vue使用v-viewer实现图片预览
2020/10/21 Javascript
原生JavaScript实现幻灯片效果
2021/02/19 Javascript
Numpy数组array和矩阵matrix转换方法
2019/08/05 Python
Python 使用threading+Queue实现线程池示例
2019/12/21 Python
使用wxpy实现自动发送微信消息功能
2020/02/28 Python
什么是python类属性
2020/06/10 Python
python开根号实例讲解
2020/08/30 Python
Pycharm 跳转回之前所在页面的操作
2021/02/05 Python
日本一家专门经营各种箱包的大型网站:Traveler Store
2016/08/03 全球购物
复古风格的女装和装饰品:ModCloth
2017/12/29 全球购物
巴西最大的巴士票务门户:Quero Passagem
2020/11/21 全球购物
酒后驾驶检讨书
2014/01/27 职场文书
拉拉队口号
2014/06/16 职场文书
教务处教学工作总结
2015/08/10 职场文书
教师正风肃纪心得体会
2016/01/15 职场文书
Java9新特性之Module模块化编程示例演绎
2022/03/16 Java/Android
Mysql 数据库中的 redo log 和 binlog 写入策略
2022/04/26 MySQL