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 相关文章推荐
Valerio 发布了 Mootools
Sep 23 Javascript
javascript实现的动态添加表单元素input,button等(appendChild)
Nov 24 Javascript
javascript之典型高阶函数应用介绍
Jan 10 Javascript
JavaScript动态添加列的方法
Mar 25 Javascript
jq实现左侧显示图片右侧文字滑动切换效果
Aug 04 Javascript
Bootstrap Paginator分页插件与ajax相结合实现动态无刷新分页效果
May 27 Javascript
JS提示:Uncaught SyntaxError:Unexpected token ) 错误的解决方法
Aug 19 Javascript
使用jQuery.Qrcode插件在客户端动态生成二维码并添加自定义Logo
Sep 01 Javascript
原生js获取浏览器窗口及元素宽高常用方法集合
Jan 18 Javascript
Bootstrap列表组学习使用
Feb 09 Javascript
angular实现页面打印局部功能的思考与方法
Apr 13 Javascript
Vue代码整洁之去重方法整理
Aug 06 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
php在线代理转向代码
2012/05/05 PHP
PHP基于phpqrcode生成带LOGO图像的二维码实例
2015/07/10 PHP
php检查函数必传参数是否存在的实例详解
2017/08/28 PHP
HR vs CL BO3 第一场 2.13
2021/03/10 DOTA
jQuery中delegate和on的用法与区别详细解析
2014/01/26 Javascript
JS如何将数字类型转化为没3个一个逗号的金钱格式
2014/01/27 Javascript
Node.js刷新session过期时间的实现方法推荐
2016/05/18 Javascript
JS实现动态表格的添加,修改,删除功能(推荐)
2016/06/15 Javascript
AngularJS基础 ng-focus 指令简单示例
2016/08/01 Javascript
bootstrap监听滚动实现头部跟随滚动
2016/11/08 Javascript
jQuery编写网页版2048小游戏
2017/01/06 Javascript
原生JS实现$.param() 函数的方法
2018/08/10 Javascript
发布订阅模式在vue中的实际运用实例详解
2019/06/09 Javascript
学习python的几条建议分享
2013/02/10 Python
使用Python开发windows GUI程序入门实例
2014/10/23 Python
Python3实现从文件中读取指定行的方法
2015/05/22 Python
python merge、concat合并数据集的实例讲解
2018/04/12 Python
python抓取网站的图片并下载到本地的方法
2018/05/22 Python
Selenium元素的常用操作方法分析
2018/08/10 Python
python按时间排序目录下的文件实现方法
2018/10/17 Python
对python requests发送json格式数据的实例详解
2018/12/19 Python
Python下简易的单例模式详解
2019/04/08 Python
PYcharm 激活方法(推荐)
2020/03/23 Python
python 安装impala包步骤
2020/03/28 Python
基于python检查SSL证书到期情况代码实例
2020/04/04 Python
python 制作python包,封装成可用模块教程
2020/07/13 Python
Python自定义sorted排序实现方法详解
2020/09/18 Python
输入N,打印N*N矩阵
2012/02/20 面试题
创新比赛获奖感言
2014/02/13 职场文书
2014乡镇“三八”国际劳动妇女节活动总结
2014/03/01 职场文书
平安家庭示范户事迹
2014/06/02 职场文书
领导干部群众路线对照检查材料
2014/11/05 职场文书
主持人开场白台词
2015/05/29 职场文书
遇事可以测出您的见识与格局
2019/09/16 职场文书
Spring mvc是如何实现与数据库的前后端的连接操作的?
2021/06/30 Java/Android
Python加密与解密模块hashlib与hmac
2022/06/05 Python