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 相关文章推荐
一个网页标题title的闪动提示效果实现思路
Mar 22 Javascript
JavaScript显示表单内元素数量的方法
Apr 02 Javascript
JavaScript获取当前运行脚本文件所在目录的方法
Feb 03 Javascript
jQuery绑定事件-多种实现方式总结
May 09 Javascript
bootstrap栅格系统示例代码分享
May 22 Javascript
详解Vue 方法与事件处理器
Jun 20 Javascript
AngularJS 事件发布机制
Aug 28 Javascript
微信小程序学习笔记之函数定义、页面渲染图文详解
Mar 28 Javascript
Node.js学习之内置模块fs用法示例
Jan 22 Javascript
让IDE识别webpack的别名alias的实现方法
May 06 Javascript
jQuery三组基本动画与自定义动画操作实例总结
May 09 jQuery
vue项目配置 webpack-obfuscator 进行代码加密混淆的实现
Feb 26 Vue.js
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实现点击可刷新验证码
2015/11/07 PHP
swoole和websocket简单聊天室开发
2017/11/18 PHP
PHP中define() 与 const定义常量的区别详解
2019/06/25 PHP
javascript使用activex控件的代码
2011/01/27 Javascript
jquery移动listbox的值原理及代码
2013/05/03 Javascript
动态加载JS文件的三种方法
2013/11/08 Javascript
js绘制圆形和矩形的方法
2015/08/05 Javascript
跟我学习javascript的闭包
2015/11/16 Javascript
JavaScript+html5 canvas绘制缤纷多彩的三角形效果完整实例
2016/01/26 Javascript
jQuery中判断对象是否存在的方法汇总
2016/02/24 Javascript
jQuery实现的简单百分比进度条效果示例
2016/08/01 Javascript
原生js编写2048小游戏
2017/03/17 Javascript
javascript基础进阶_深入剖析执行环境及作用域链
2017/09/05 Javascript
详解Vue用自定义指令完成一个下拉菜单(select组件)
2017/10/31 Javascript
微信小程序获取手机网络状态的方法【附源码下载】
2017/12/08 Javascript
微信小程序添加插屏广告并设置显示频率(一天一次)
2019/12/06 Javascript
详解如何修改 node_modules 里的文件
2020/05/22 Javascript
vue二选一tab栏切换新做法实现
2021/01/19 Vue.js
[02:20]DOTA2亚洲邀请赛 IG战队出场宣传片
2015/02/07 DOTA
[01:12:08]LGD vs OG 2019国际邀请赛淘汰赛 胜者组 BO3 第一场 8.24
2019/09/10 DOTA
python实现划词翻译
2020/04/23 Python
Python 命令行非阻塞输入的小例子
2013/09/27 Python
Python开发常用的一些开源Package分享
2015/02/14 Python
详解Python if-elif-else知识点
2018/06/11 Python
Python enumerate函数功能与用法示例
2019/03/01 Python
Python3.5面向对象与继承图文实例详解
2019/04/24 Python
TensorFlow tensor的拼接实例
2020/01/19 Python
python与pycharm有何区别
2020/07/01 Python
详解HTML5中ol标签的用法
2015/09/08 HTML / CSS
世界知名接发和假发品牌:Poze Hair
2017/03/08 全球购物
中文专业学生自我评价范文
2014/02/06 职场文书
借款担保书范文
2014/05/13 职场文书
承诺书范文
2014/06/03 职场文书
银行授权委托书格式
2014/10/10 职场文书
2014大学辅导员工作总结
2014/12/02 职场文书
Python中三种花式打印的示例详解
2022/03/19 Python