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插件 cluetip 关键词注释
Jan 12 Javascript
JQuery 确定css方框模型(盒模型Box Model)
Jan 22 Javascript
分享一个自己动手写的jQuery分页插件
Aug 28 Javascript
node.js中的favicon.ico请求问题处理
Dec 15 Javascript
jQuery中;function($,undefined) 前面的分号的用处
Dec 17 Javascript
JavaScript中数组继承的简单示例
Jul 29 Javascript
JavaScript鼠标特效大全
Sep 13 Javascript
js实现城市级联菜单的2种方法
Jun 23 Javascript
js实现首屏延迟加载实现方法 js实现多屏单张图片延迟加载效果
Jul 17 Javascript
RequireJS用法简单示例
Aug 20 Javascript
Angular4.0动画操作实例详解
May 10 Javascript
浅析vue-cli3配置webpack-bundle-analyzer插件【推荐】
Oct 23 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.ini中文版
2006/10/09 PHP
浅析php变量修饰符static的使用
2013/06/28 PHP
2个比较经典的PHP加密解密函数分享
2014/07/01 PHP
PHP 导出Excel示例分享
2014/08/18 PHP
PHP curl CURLOPT_RETURNTRANSFER参数的作用使用实例
2015/02/07 PHP
CodeIgniter删除和设置Cookie的方法
2015/04/07 PHP
php官方微信接口大全(微信支付、微信红包、微信摇一摇、微信小店)
2015/12/21 PHP
PHP多线程模拟实现秒杀抢单
2018/02/07 PHP
使Ext的Template可以解析二层的json数据的方法
2007/12/22 Javascript
js 刷新页面的代码小结 推荐
2010/04/02 Javascript
ASP.NET jQuery 实例13 原创jQuery文本框字符限制插件-TextArea Counter
2012/02/03 Javascript
javascript中验证大写字母、数字和中文
2014/01/15 Javascript
通过JS判断联网类型和连接状态的实现代码
2015/04/01 Javascript
Laydate时间组件在火狐浏览器下有多时间输入框时只能给第一个输入框赋值的解决方法
2016/08/18 Javascript
JQuery获取鼠标进入和离开容器的方向
2016/12/29 Javascript
微信小程序的动画效果详解
2017/01/18 Javascript
js实现漫天星星效果
2017/01/19 Javascript
原生js实现电商侧边导航效果
2017/01/19 Javascript
AngularJS实现的根据数量与单价计算总价功能示例
2017/12/26 Javascript
Vue的watch和computed方法的使用及区别介绍
2018/09/06 Javascript
laydate时间日历插件使用方法详解
2018/11/14 Javascript
JS监听滚动和id自动定位滚动
2018/12/18 Javascript
手写Vue弹窗Modal的实现代码
2019/09/11 Javascript
js 实现watch监听数据变化的代码
2019/10/13 Javascript
javascript设计模式 ? 享元模式原理与用法实例分析
2020/04/15 Javascript
关于Js中new操作符的作用详解
2021/02/21 Javascript
python访问sqlserver示例
2014/02/10 Python
Python中使用MELIAE分析程序内存占用实例
2015/02/18 Python
详解Python 爬取13个旅游城市,告诉你五一大家最爱去哪玩?
2019/05/07 Python
python实现五子棋游戏
2019/06/18 Python
详解Python并发编程之从性能角度来初探并发编程
2019/08/23 Python
完美解决pyinstaller打包报错找不到依赖pypiwin32或pywin32-ctypes的错误
2020/04/01 Python
党员批评与自我批评范文
2014/09/23 职场文书
2015庆祝七一建党节94周年活动总结
2015/03/20 职场文书
应急管理工作总结2015
2015/05/04 职场文书
SQLServer中JSON文档型数据的查询问题解决
2021/06/27 SQL Server