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 相关文章推荐
一个关于jqGrid使用的小例子(行按钮)
Nov 04 Javascript
ie浏览器使用js导出网页到excel并打印
Mar 11 Javascript
JS实现黑色大气的二级导航菜单效果
Sep 18 Javascript
js实现页面跳转的五种方法推荐
Mar 10 Javascript
基于jQuery和Bootstrap框架实现仿知乎前端动态列表效果
Nov 09 Javascript
深入浅析Vue组件开发
Nov 25 Javascript
angular.js指令中transclude选项及ng-transclude指令详解
May 24 Javascript
微信小程序中使用Promise进行异步流程处理的实例详解
Aug 17 Javascript
使用node.js对音视频文件加密的实例代码
Aug 30 Javascript
javascript按钮禁用和启用的效果实例代码
Oct 29 Javascript
vue2.0中set添加属性后视图不能更新的解决办法
Feb 22 Javascript
ES6字符串的扩展实例
Dec 21 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
4.与数据库的连接
2006/10/09 PHP
透析PHP的配置文件php.ini
2006/10/09 PHP
编译php 5.2.14+fpm+memcached(具体操作详解)
2013/06/18 PHP
php生成图形验证码几种方法小结
2013/08/15 PHP
利用中国天气预报接口实现简单天气预报
2014/01/20 PHP
关于WordPress的SEO优化相关的一些PHP页面脚本技巧
2015/12/10 PHP
PHP根据树的前序遍历和中序遍历构造树并输出后序遍历的方法
2017/11/10 PHP
Thinkphp集成抖音SDK的实现方法
2020/04/28 PHP
JS 自定义带默认值的函数
2011/07/21 Javascript
js生成随机数之random函数随机示例
2013/12/20 Javascript
JavaScript获取网页支持表单字符集的方法
2015/04/02 Javascript
jQuery 监控键盘一段时间没输入
2016/04/22 Javascript
深入剖析JavaScript面向对象编程
2016/07/12 Javascript
使用BootStrap实现用户登录界面UI
2016/08/10 Javascript
jQuery 插件实现随机自由弹跳气泡样式
2017/01/12 Javascript
Angular在一个页面中使用两个ng-app的方法
2017/02/20 Javascript
在Vue 中获取下拉框的文本及选项值操作
2020/08/13 Javascript
jQuery插件实现图片轮播效果
2020/10/19 jQuery
Python中删除文件的程序代码
2011/03/13 Python
Python语言编写电脑时间自动同步小工具
2013/03/08 Python
Python中实现常量(Const)功能
2015/01/28 Python
深入学习Python中的装饰器使用
2016/06/20 Python
python DataFrame 取差集实例
2019/01/30 Python
mac系统下Redis安装和使用步骤详解
2019/07/09 Python
Python包,__init__.py功能与用法分析
2020/01/07 Python
windows、linux下打包Python3程序详细方法
2020/03/17 Python
django数据模型中null和blank的区别说明
2020/09/02 Python
ellesse美国官方商店:意大利高级运动服品牌
2019/10/29 全球购物
工商学院毕业生自荐信
2013/11/12 职场文书
期末考试动员演讲稿
2014/01/10 职场文书
教师师德演讲稿
2014/05/06 职场文书
鼓舞士气的口号
2014/06/16 职场文书
十一国庆节“向国旗敬礼”主题班会活动方案
2014/09/27 职场文书
普通党员个人剖析材料
2014/10/08 职场文书
小学公民道德宣传日活动总结
2015/03/23 职场文书
MySQL如何快速创建800w条测试数据表
2022/03/17 MySQL