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 相关文章推荐
关于javascript中的parseInt使用技巧
Sep 03 Javascript
JavaScript几种数组去掉重复值的方法推荐
Apr 12 Javascript
使用JavaScript获取Request中参数的值方法
Sep 27 Javascript
jQuery实现标签页效果实战(4)
Feb 08 Javascript
JS正则表达式验证账号、手机号、电话和邮箱是否合法
Mar 08 Javascript
jquery PrintArea 实现票据的套打功能(代码)
Mar 17 Javascript
node.js中fs文件系统目录操作与文件信息操作
Feb 24 Javascript
vue之浏览器存储方法封装实例
Mar 15 Javascript
vue 监听键盘回车事件详解 @keyup.enter || @keyup.enter.native
Aug 25 Javascript
微信小程序template模板与component组件的区别和使用详解
May 22 Javascript
实用的Vue开发技巧
May 30 Javascript
微信小程序移动拖拽视图-movable-view实例详解
Aug 17 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
受疫情影响 动画《Re从零开始的异世界生活》第二季延期至7月
2020/03/10 日漫
Linux下ZendOptimizer的安装与配置方法
2007/04/12 PHP
PHP+FastCGI+Nginx配置PHP运行环境
2014/08/07 PHP
php简单实现屏蔽指定ip段用户的访问
2015/04/29 PHP
PHP7 windows支持
2021/03/09 PHP
In Javascript Class, how to call the prototype method.(three method)
2007/01/09 Javascript
基于jquery的获取浏览器窗口大小的代码
2011/03/28 Javascript
父节点获取子节点的字符串示例代码
2014/02/26 Javascript
改变隐藏的input中value值的方法
2014/03/19 Javascript
js实现Select下拉框具有输入功能的方法
2015/02/06 Javascript
jQuery简单几行代码实现tab切换
2015/03/10 Javascript
jQuery实现模拟marquee标签效果
2015/07/14 Javascript
jQuery带进度条全屏图片轮播特效代码分享
2020/06/28 Javascript
通过JS获取Request.QueryString()参数的值实现方法
2016/09/27 Javascript
Centos7 中 Node.js安装简单方法
2016/11/02 Javascript
AngularJS实现ajax请求的方法
2016/11/22 Javascript
原生JS京东轮播图代码
2017/03/22 Javascript
深入理解vue路由的使用
2017/03/24 Javascript
React.js中常用的ES6写法总结(推荐)
2017/05/09 Javascript
浅谈angular2路由预加载策略
2017/10/04 Javascript
详解angular部署到iis出现404解决方案
2018/08/14 Javascript
解决vue-cli 打包后自定义动画未执行的问题
2019/11/12 Javascript
[04:04]DOTA2亚洲邀请赛比赛场馆&酒店全攻略
2017/03/23 DOTA
Python连接SQLServer2000的方法详解
2017/04/19 Python
使用Python爬取最好大学网大学排名
2018/02/24 Python
python3的输入方式及多组输入方法
2018/10/17 Python
python使用requests.session模拟登录
2019/08/09 Python
python使用matplotlib的savefig保存时图片保存不完整的问题
2021/01/08 Python
世界上最大的折扣香水店:FragranceNet.com
2016/10/26 全球购物
报关专员求职信范文
2014/02/22 职场文书
社会实践的活动方案
2014/08/22 职场文书
乱丢垃圾袋检讨书
2014/10/08 职场文书
论群众路线学习心得体会
2014/10/31 职场文书
婚宴父母致辞
2015/07/27 职场文书
送给教师们,到底该如何写好教学反思?
2019/07/02 职场文书
手把手教你使用TensorFlow2实现RNN
2021/07/15 Python