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 相关文章推荐
兼容Mozilla必须知道的知识。
Jan 09 Javascript
jQuery使用before()和after()在元素前后添加内容的方法
Mar 26 Javascript
Javascript基础教程之比较null和undefined值
May 16 Javascript
js实现移动端微信页面禁止字体放大
Feb 16 Javascript
JavaScript函数柯里化原理与用法分析
Mar 31 Javascript
React服务端渲染(总结)
Jul 01 Javascript
vuejs手把手教你写一个完整的购物车实例代码
Jul 06 Javascript
JS原生带小白点轮播图实例讲解
Jul 22 Javascript
JS对象与JSON互转换、New Function()、 forEach()、DOM事件流等js开发基础小结
Aug 10 Javascript
JS实现的3des+base64加密解密算法完整示例
May 18 Javascript
Angular6 用户自定义标签开发的实现方法
Jan 08 Javascript
koa中间件核心(koa-compose)源码解读分析
Jun 15 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的FTP学习(三)
2006/10/09 PHP
PHP面向对象程序设计之接口用法
2014/08/20 PHP
asp函数split()对应php函数explode()
2019/02/27 PHP
List all the Databases on a SQL Server
2007/06/21 Javascript
简单的js分页脚本
2009/05/21 Javascript
关于二级域名下使用一级域名下的COOKIE的问题
2011/11/07 Javascript
nullJavascript中创建对象的五种方法实例
2013/05/07 Javascript
目前流行的JavaScript库的介绍及对比
2013/09/29 Javascript
Javascript MVC框架Backbone.js详解
2014/09/18 Javascript
JavaScript中调用函数的4种方式代码实例
2015/07/08 Javascript
JavaScript面向对象程序设计教程
2016/03/29 Javascript
JS仿JQuery选择器功能
2017/03/08 Javascript
js编写选项卡效果
2017/05/23 Javascript
详解vue-cli中的ESlint配置文件eslintrc.js
2017/09/25 Javascript
vue.js整合mint-ui里的轮播图实例代码
2017/12/27 Javascript
Websocket 向指定用户发消息的方法
2020/01/09 Javascript
[01:13]这,就是刀塔
2014/07/16 DOTA
python实现忽略大小写对字符串列表排序的方法
2014/09/25 Python
编写简单的Python程序来判断文本的语种
2015/04/07 Python
python搭建微信公众平台
2016/02/09 Python
python中利用Future对象回调别的函数示例代码
2017/09/07 Python
python 3利用Dlib 19.7实现摄像头人脸检测特征点标定
2018/02/26 Python
python实现AES加密和解密
2019/03/27 Python
在pytorch 中计算精度、回归率、F1 score等指标的实例
2020/01/18 Python
建筑施工员岗位职责
2013/11/26 职场文书
建设投标担保书
2014/05/13 职场文书
个人委托书范本
2014/09/13 职场文书
2015出纳试用期工作总结
2014/12/12 职场文书
三好学生个人总结
2015/02/15 职场文书
城南旧事电影观后感
2015/06/16 职场文书
交通事故责任认定书
2015/08/06 职场文书
少先队大队委竞选口号
2015/12/25 职场文书
教您:房贷工资收入证明应该怎么写?
2019/08/19 职场文书
OpenCV-Python实现人脸磨皮算法
2021/06/07 Python
MySQL如何快速创建800w条测试数据表
2022/03/17 MySQL
Redis批量生成数据的实现
2022/06/05 Redis