jquery 跳到顶部和底部动画2句代码简单实现


Posted in Javascript onJuly 18, 2013
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" > 
<head> 
<title>Untitled Page</title> 
<script type="text/javascript" src=jquery-1.8.0.js></script> 
<script> 
$(document).ready(function () { 
//当点击顶部按钮的时候,执行方法,scrollTop属性获取选中标签距滚动条的距离。 
$('#top').click(function () { 
$('html').animate( 
{ scrollTop: '0px' }, 1000 
); 
}); 
//当点击底部标签时候,执行方法,其中offset()获取匹配元素在当前视口的相对偏移,返回的是一个对象,有两个属性top,left 
//animate,的第二个属性当然我们也可以设置'slow','normal'或'fast' 
$('#foot').click(function () { 
$('html').animate( 
{scrollTop:$('span').offset().top},1000 
); 
}); 
}); 
</script> 
</head> 
<body> 
<br /> <br /> <br /> <br /> <br /> 
<a href="#" id="foot">底部</a> 
<br /> <br /> <br /> <br /> <br /> 
<br /> <br /> <br /> <br /> <br /> <a href="#" id="top">顶部</a> 
<br /> <br /> <br /> <br /> <br /> 
<span></span> 
</body> 
</html>
Javascript 相关文章推荐
asp 的 分词实现代码
May 24 Javascript
Js+Flash实现访问剪切板操作
Nov 20 Javascript
jquery仿百度经验滑动切换浏览效果
Apr 14 Javascript
理解JavaScript中Promise的使用
Jan 18 Javascript
JavaScript的变量声明提升问题浅析(Hoisting)
Nov 30 Javascript
jQuery学习之DOM节点的插入方法总结
Jan 22 Javascript
vue打包后显示空白正确处理方法
Nov 01 Javascript
小程序图片剪裁加旋转的示例代码
Jul 10 Javascript
Vue 报错TypeError: this.$set is not a function 的解决方法
Dec 17 Javascript
JavaScript 预解析的4种实现方法解析
Sep 03 Javascript
Vue移动端项目实现使用手机预览调试操作
Jul 18 Javascript
react-native 实现购物车滑动删除效果的示例代码
Jan 15 Javascript
公共js在页面底部加载的注意事项介绍
Jul 18 #Javascript
利用div+jquery自定义滚动条样式的2种方法
Jul 18 #Javascript
JavaScript实现复制功能各浏览器支持情况实测
Jul 18 #Javascript
GRID拖拽行的实例代码
Jul 18 #Javascript
去掉gridPanel表头全选框的小例子
Jul 18 #Javascript
gridpanel动态加载数据的实例代码
Jul 18 #Javascript
javaScript NameSpace 简单说明介绍
Jul 18 #Javascript
You might like
使用zend studio for eclipse不能激活代码提示功能的解决办法
2009/10/11 PHP
php数组函数序列之prev() - 移动数组内部指针到上一个元素的位置,并返回该元素值
2011/10/31 PHP
WordPress开发中用于标题显示的相关函数使用解析
2016/01/07 PHP
php验证码生成器
2017/05/24 PHP
深入理解 PHP7 中全新的 zval 容器和引用计数机制
2018/10/15 PHP
js下拉选择框与输入框联动实现添加选中值到输入框的方法
2015/08/17 Javascript
JS中mouseover和mouseout多次触发问题如何解决
2016/06/06 Javascript
JS制作适用于手机和电脑的通知信息效果
2016/10/28 Javascript
微信小程序实现图片预加载组件
2017/01/18 Javascript
Bootstrap Table使用整理(四)之工具栏
2017/06/09 Javascript
node实现基于token的身份验证
2018/04/09 Javascript
vue项目中jsonp跨域获取qq音乐首页推荐问题
2018/05/30 Javascript
详解基于vue-cli3快速发布一个fullpage组件
2019/03/08 Javascript
JS sort方法基于数组对象属性值排序
2020/07/10 Javascript
jdk1.8+vue elementui实现多级菜单功能
2020/09/24 Javascript
js 执行上下文和作用域的相关总结
2021/02/08 Javascript
[49:08]FNATIC vs Infamous 2019国际邀请赛小组赛 BO2 第二场 8.16
2019/08/18 DOTA
Python实现删除当前目录下除当前脚本以外的文件和文件夹实例
2015/07/27 Python
详解Python3除法之真除法、截断除法和下取整对比
2019/05/23 Python
KIKO MILANO英国官网:意大利知名化妆品和护肤品品牌
2017/09/25 全球购物
美国球鞋寄卖网站:Stadium Goods
2018/05/09 全球购物
"火柴棍式"程序员面试题
2014/03/16 面试题
实习求职信
2013/12/01 职场文书
写演讲稿要注意的六件事
2014/01/14 职场文书
酒店员工检讨书
2014/02/18 职场文书
家长对学生的评语
2014/04/18 职场文书
环保建议书100字
2014/05/14 职场文书
个人查摆问题及整改措施
2014/10/16 职场文书
党员作风建设整改方案
2014/10/27 职场文书
风雨哈佛路观后感
2015/06/03 职场文书
毕业生学校组织意见
2015/06/04 职场文书
搞笑的婚礼主持词
2015/06/29 职场文书
关于社会实践的心得体会(2016最新版)
2016/01/25 职场文书
解析:创业计划书和商业计划书二者之间到底有什么区别
2019/08/14 职场文书
Vue如何清空对象
2022/03/03 Vue.js
win10+RTX3050ti+TensorFlow+cudn+cudnn配置深度学习环境的方法
2022/06/25 Servers