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 css在IE和Firefox中区别分析
Feb 18 Javascript
javascript 跳转代码集合
Dec 03 Javascript
jQueryUI 拖放排序遇到滚动条时有可能无法执行排序的小bug及解决方案
Dec 19 Javascript
Angular.JS内置服务$http对数据库的增删改使用教程
May 07 Javascript
微信小程序动态增加按钮组件
Sep 14 Javascript
node+express框架中连接使用mysql(经验总结)
Nov 10 Javascript
vue模式history下在iis中配置流程
Apr 17 Javascript
Vue 自定义指令实现一键 Copy功能
Sep 16 Javascript
JsonProperty 的使用方法详解
Oct 11 Javascript
Vue中使用wangeditor富文本编辑的问题
Feb 07 Vue.js
Vue接口封装的完整步骤记录
May 14 Vue.js
React列表栏及购物车组件使用详解
Jun 28 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
解密ThinkPHP3.1.2版本之独立分组功能应用
2014/06/19 PHP
PHP中功能强大却很少使用的函数实例小结
2016/11/10 PHP
Laravel配置全局公共函数的方法步骤
2019/05/09 PHP
Extjs学习笔记之八 继承和事件基础
2010/01/08 Javascript
JavaScript高级程序设计(第3版)学习笔记8 js函数(中)
2012/10/11 Javascript
javascript 实现字符串反转的三种方法
2013/11/23 Javascript
Nodejs实现批量下载妹纸图
2015/05/28 NodeJs
js实现C#的StringBuilder效果完整实例
2015/12/22 Javascript
整理JavaScript对DOM中各种类型的元素的常用操作
2016/05/05 Javascript
Angular2内置指令NgFor和NgIf详解
2016/08/03 Javascript
loading动画特效小结
2017/01/22 Javascript
js中json对象和字符串的理解及相互转化操作实现方法
2017/09/22 Javascript
ES6 fetch函数与后台交互实现
2018/11/14 Javascript
帮你彻底搞懂JS中的prototype、__proto__与constructor(图解)
2019/08/23 Javascript
vue组件内部引入外部js文件的方法
2020/01/18 Javascript
es6中Promise 对象基本功能与用法实例分析
2020/02/23 Javascript
用jQuery实现抽奖程序
2020/04/12 jQuery
nuxt.js 在middleware(中间件)中实现路由鉴权操作
2020/11/06 Javascript
解决vue-cli输入命令vue ui没效果的问题
2020/11/17 Javascript
Python遍历目录中的所有文件的方法
2016/07/08 Python
基于Python中求和函数sum的用法详解
2018/06/28 Python
python实现简单多人聊天室
2018/12/11 Python
Python函数式编程指南:对生成器全面讲解
2019/11/19 Python
Python调用graphviz绘制结构化图形网络示例
2019/11/22 Python
使用pyhon绘图比较两个手机屏幕大小(实例代码)
2020/01/03 Python
在浏览器端如何得到服务器端响应的XML数据
2012/11/24 面试题
十八大报告观后感
2014/01/28 职场文书
小学教师培训感言
2014/02/11 职场文书
初中家长寄语
2014/04/02 职场文书
2014年十一国庆向国旗敬礼寄语
2014/04/11 职场文书
语文教育专业求职信
2014/06/28 职场文书
班级心理活动总结
2014/07/04 职场文书
小区的门卫岗位职责
2014/10/01 职场文书
党员干部反四风民主生活会对照检查材料思想汇报
2014/10/12 职场文书
幼儿园教师节感谢信
2015/01/23 职场文书
MySQL创建表操作命令分享
2022/03/25 MySQL