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中Dom的基本操作小结
Jan 23 Javascript
JavaScript 获取任一float型小数点后两位的小数
Jun 30 Javascript
JavaScript驾驭网页-DOM
Mar 24 Javascript
JS实现控制文本框的内容
Jul 10 Javascript
select隐藏选中值对应的id,显示其它id的简单实现方法
Aug 25 Javascript
jQuery插件Echarts实现的渐变色柱状图
Mar 23 jQuery
如何编写jquery插件
Mar 29 jQuery
js实现图片上传并预览功能
Aug 06 Javascript
vue集成kindeditor富文本的实现示例代码
Jun 07 Javascript
解决layer 动态加载select 失效的问题
Sep 18 Javascript
layui switch 开关监听 弹出确定状态转换的例子
Sep 21 Javascript
Vue调用后端java接口的实例代码
Oct 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
PHP session有效期问题
2009/04/26 PHP
PHP投票系统防刷票判断流程分析
2012/02/04 PHP
PHP 第二节 数据类型之数值型
2012/04/28 PHP
php环境下利用session防止页面重复刷新的具体实现
2014/01/09 PHP
php判断GIF图片是否为动画的方法
2020/09/04 PHP
PHP和Mysql中转UTF8编码问题汇总
2015/10/10 PHP
必须收藏的23个php实用代码片段
2016/02/02 PHP
document.all还是document.getElementsByName?
2006/07/21 Javascript
动态改变textbox的宽高的js
2006/10/26 Javascript
Js 本页面传值实现代码
2009/05/17 Javascript
FileUpload 控件 禁止手动输入或粘贴的实现代码
2010/04/07 Javascript
jQuery实现响应鼠标背景变化的动态菜单效果代码
2015/08/27 Javascript
JS组件Bootstrap Table表格行拖拽效果实现代码
2020/08/27 Javascript
利用jQuery.Validate异步验证用户名是否存在(推荐)
2016/12/09 Javascript
js实现短信发送倒计时功能(正则验证)
2017/02/10 Javascript
js实现百度登录框鼠标拖拽效果
2017/03/07 Javascript
利用vscode编写vue的简单配置详解
2017/06/17 Javascript
JavaScript输入分钟、秒倒计时技巧总结(附代码)
2017/08/17 Javascript
JQuery属性操作与循环用法示例
2019/05/15 jQuery
jquery实现的放大镜效果示例
2020/02/24 jQuery
解决Echarts2竖直datazoom滑动后显示数据不全的问题
2020/07/20 Javascript
Python实现求解括号匹配问题的方法
2018/04/17 Python
详解Django项目中模板标签及模板的继承与引用(网站中快速布置广告)
2019/03/27 Python
TensorFlow实现指数衰减学习率的方法
2020/02/05 Python
Python趣味实例,实现一个简单的抽奖刮刮卡
2020/07/18 Python
CSS3中的Transition过度与Animation动画属性使用要点
2016/05/20 HTML / CSS
浅谈html5标签css3的常用样式
2016/10/20 HTML / CSS
广州某公司软件工程师面试题
2014/12/22 面试题
口腔医学技术应届生求职信
2013/11/09 职场文书
《骆驼和羊》教学反思
2014/02/27 职场文书
二手房购房意向书范本
2014/04/01 职场文书
勤奋学习演讲稿
2014/05/10 职场文书
访谈节目策划方案
2014/05/15 职场文书
公务员处分决定书
2015/06/25 职场文书
TV动画《政宗君的复仇》第二季制作决定PV公布
2022/04/02 日漫
python使用pycharm安装pyqt5以及相关配置
2022/04/22 Python