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 KeyDown、KeyPress和KeyUp事件的区别与联系
Dec 03 Javascript
修改好的jquery滚动字幕效果实现代码
Jun 22 Javascript
js下获得客户端操作系统的函数代码(1:vista,2:windows7,3:2000,4:xp,5:2003,6:2008)
Oct 31 Javascript
编写针对IE的JS代码两种编写方法
Jan 30 Javascript
js 文本滚动效果的实例代码
Aug 17 Javascript
js控制鼠标事件移动及移出效果显示
Oct 19 Javascript
jQuery老黄历完整实现方法
Jan 16 Javascript
基于JQuery的Ajax方法使用详解
Aug 16 jQuery
Puppeteer 爬取动态生成的网页实战
Nov 14 Javascript
vue通过指令(directives)实现点击空白处收起下拉框
Dec 06 Javascript
Angular Excel 导入与导出的实现代码
Apr 17 Javascript
Vue + element 实现多选框组并保存已选id集合的示例代码
Jun 03 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高手?学会“懒惰”的编程
2006/12/05 PHP
PHP MYSQL乱码问题,使用SET NAMES utf8校正
2009/11/30 PHP
php实现获取及设置用户访问页面语言类
2014/09/24 PHP
PHP数组array类常见操作示例
2020/05/15 PHP
php提高脚本性能的4个技巧
2020/08/18 PHP
phpStorm2020 注册码
2020/09/17 PHP
jQuery 扩展对input的一些操作方法
2009/10/30 Javascript
jQuery的三种$()
2009/12/30 Javascript
jQuery 数据缓存data(name, value)详解及实现
2010/01/04 Javascript
ie8 不支持new Date(2012-11-10)问题的解决方法
2013/07/31 Javascript
JS鼠标滑过图片时切换图片实现思路
2013/09/12 Javascript
jquery Tab效果和动态加载的简单实例
2013/12/11 Javascript
js获取当前日期前七天的方法
2015/02/28 Javascript
Bootstrap每天必学之导航条(二)
2016/03/01 Javascript
BootStrap下拉框在firefox浏览器界面不友好的解决方案
2016/08/18 Javascript
在百度搜索结果中去除掉一些网站的资料(通过js控制不让显示)
2017/05/02 Javascript
JQuery实现table中tr上移下移的示例(超简单)
2018/01/08 jQuery
使用vue-route 的 beforeEach 实现导航守卫(路由跳转前验证登录)功能
2018/03/22 Javascript
jQuery实现为table表格动态添加或删除tr功能示例
2019/02/19 jQuery
[09:22]2014DOTA2西雅图国际邀请赛 主赛事第二日TOPPLAY
2014/07/21 DOTA
python复制与引用用法分析
2015/04/08 Python
python中string模块各属性以及函数的用法介绍
2016/05/30 Python
Bottle框架中的装饰器类和描述符应用详解
2017/10/28 Python
django 邮件发送模块smtp使用详解
2019/07/22 Python
python使用 __init__初始化操作简单示例
2019/09/26 Python
python实现一个猜拳游戏
2020/04/05 Python
如何利用Python 进行边缘检测
2020/10/14 Python
英国知名奢侈品包包品牌:Milli Millu
2016/12/22 全球购物
英国HYPE双肩包官网:英国本土时尚潮牌
2018/09/26 全球购物
关于保护环境的标语
2014/06/09 职场文书
党员批评与自我批评(5篇)
2014/09/23 职场文书
民主生活会对照检查材料思想汇报
2014/09/27 职场文书
党纪处分决定书
2015/06/24 职场文书
《世界多美呀》教学反思
2016/02/22 职场文书
创业计划书之美甲店
2019/09/20 职场文书
pyqt5蒙版遮罩mask,setmask的使用
2021/06/11 Python