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 相关文章推荐
Javascript实现的分页函数
Dec 22 Javascript
JS类库Bindows1.3中的内存释放方式分析
Mar 08 Javascript
Javascript 文件夹选择框的两种解决方案
Jul 01 Javascript
原生js做的手风琴效果的导航菜单
Nov 08 Javascript
ExtJS 刷新后如何默认选中刷新前最后一次选中的节点
Apr 03 Javascript
Android中的jQuery:AQuery简介
May 06 Javascript
javascript面向对象之对象的深入理解
Jan 13 Javascript
jQuery插件之Tocify动态节点目录菜单生成器附源码下载
Jan 08 Javascript
基于javascript实现按圆形排列DIV元素(二)
Dec 02 Javascript
Vue.js做select下拉列表的实例(ul-li标签仿select标签)
Mar 02 Javascript
微信小程序适配iphoneX的实现方法
Sep 18 Javascript
微信小程序tab切换可滑动切换导航栏跟随滚动实现代码
Sep 04 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
一个查看session内容的函数
2006/10/09 PHP
PHP中exec函数和shell_exec函数的区别
2014/08/20 PHP
php正则表达式获取内容所有链接
2015/07/24 PHP
详谈php中 strtr 和 str_replace 的效率问题
2017/05/14 PHP
javascript 写类方式之一
2009/07/05 Javascript
24款非常有用的 jQuery 插件分享
2011/04/06 Javascript
理清apply(),call()的区别和关系
2011/08/14 Javascript
JS读取cookies信息(记录用户名)
2012/01/10 Javascript
jQuery基于ajax实现带动画效果无刷新柱状图投票代码
2015/08/10 Javascript
jQuery插件imgPreviewQs实现上传图片预览
2016/01/15 Javascript
JavaScript实现邮箱地址自动匹配功能代码
2016/11/28 Javascript
JS敏感词过滤代码
2016/12/23 Javascript
js实现文字向上轮播功能
2017/01/13 Javascript
Vue自定义指令详解
2017/07/28 Javascript
angularjs实现猜数字大小功能
2020/05/20 Javascript
js+html实现点名系统功能
2019/11/05 Javascript
小程序实现图片移动缩放效果
2020/05/26 Javascript
JS实现数据动态渲染的竖向步骤条
2020/06/24 Javascript
[02:28]DOTA2英雄基础教程 灰烬之灵
2013/12/19 DOTA
[50:01]Ti4 冒泡赛第二天 NEWBEE vs Titan
2014/07/15 DOTA
Python version 2.7 required, which was not found in the registry
2014/08/26 Python
《Python之禅》中对于Python编程过程中的一些建议
2015/04/03 Python
tensorflow输出权重值和偏差的方法
2018/02/10 Python
Python装饰器简单用法实例小结
2018/12/03 Python
Pycharm 文件更改目录后,执行路径未更新的解决方法
2019/07/19 Python
python的pyecharts绘制各种图表详细(附代码)
2019/11/11 Python
python实现贪吃蛇游戏源码
2020/03/21 Python
python如何写try语句
2020/07/14 Python
机械设计及其自动化求职推荐信
2014/02/17 职场文书
五分钟演讲稿
2014/04/30 职场文书
出国英文推荐信
2014/05/10 职场文书
土地租赁意向书
2014/07/30 职场文书
本科应届生求职信
2014/08/05 职场文书
2015年国庆节慰问信
2015/03/23 职场文书
动作冒险《Hell Is Us》将采用虚幻5 消灭怪物探索王国
2022/04/13 其他游戏
java实现面板之间切换功能
2022/06/10 Java/Android