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 相关文章推荐
一段效率很高的for循环语句使用方法
Aug 13 Javascript
cookie丢失问题(认证失效) Authentication (用户验证信息)也会丢失
Jun 04 Javascript
javascript+mapbar实现地图定位
Apr 09 Javascript
js动态添加onload、onresize、onscroll事件(另类方法)
Dec 26 Javascript
在JavaScript中处理字符串之link()方法的使用
Jun 08 Javascript
JavaScript学习笔记之DOM基础 2.4
Aug 14 Javascript
超链接怎么正确调用javascript函数
May 23 Javascript
利用node.js实现反向代理的方法详解
Jul 24 Javascript
关于Promise 异步编程的实例讲解
Sep 01 Javascript
详解Vue 中 extend 、component 、mixins 、extends 的区别
Dec 20 Javascript
JavaScript日期工具类DateUtils定义与用法示例
Sep 03 Javascript
jquery实现简单自动轮播图效果
Jul 29 jQuery
公共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
几个有用的php字符串过滤,转换函数代码
2012/05/01 PHP
对PHP语言认识上需要避免的10大误区
2014/06/12 PHP
PHP实现创建一个RPC服务操作示例
2020/02/23 PHP
实现复选框全选/全不选切换
2006/12/23 Javascript
javascript 触发HTML元素绑定的函数
2010/09/11 Javascript
js鼠标滑轮滚动事件绑定的简单实例(兼容主流浏览器)
2014/01/14 Javascript
js判断浏览器是否支持html5
2014/08/17 Javascript
jquery中show()、hide()和toggle()用法实例
2015/01/15 Javascript
JavaScript Function函数类型介绍
2015/04/08 Javascript
jQuery鼠标悬浮链接弹出跟随图片实例代码
2016/01/08 Javascript
vue中实现移动端的scroll滚动方法
2018/03/03 Javascript
vue中实现图片压缩 file文件的方法
2020/05/28 Javascript
Python操作SQLite简明教程
2014/07/10 Python
python实现在目录中查找指定文件的方法
2014/11/11 Python
使用Python将数组的元素导出到变量中(unpacking)
2016/10/27 Python
python记录程序运行时间的三种方法
2017/07/14 Python
python实现给scatter设置颜色渐变条colorbar的方法
2018/12/13 Python
Python 正则表达式匹配字符串中的http链接方法
2018/12/25 Python
深入了解Django中间件及其方法
2019/07/26 Python
python飞机大战pygame碰撞检测实现方法分析
2019/12/17 Python
Pytorch之Variable的用法
2019/12/31 Python
如何给Python代码进行加密
2020/01/10 Python
分享一枚pycharm激活码适用所有pycharm版本我的pycharm2020.2.3激活成功
2020/11/20 Python
如何在Canvas上的图形/图像绑定事件监听的实现
2020/09/16 HTML / CSS
意大利在线药房:Farmacia Loreto Gallo
2019/08/09 全球购物
教师对学生的评语
2014/04/28 职场文书
青年教师师德演讲稿
2014/08/26 职场文书
企业法人授权委托书范本
2014/09/23 职场文书
2015年党员个人工作总结
2015/05/13 职场文书
幼儿园六一主持词开场白
2015/05/28 职场文书
主持稿开场白
2015/06/01 职场文书
教师节表彰会主持词
2015/07/06 职场文书
2016学习依法治国心得体会
2016/01/15 职场文书
《富饶的西沙群岛》教学反思
2016/02/16 职场文书
大学生如何逃脱“毕业季创业队即散伙”魔咒?
2019/08/19 职场文书
讲解Python实例练习逆序输出字符串
2022/05/06 Python