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 相关文章推荐
根据判断浏览器类型屏幕分辨率自动调用不同CSS的代码
Feb 22 Javascript
jquery复选框CHECKBOX全选、反选
Aug 30 Javascript
JQuery操作tr和td内容的方法实例
Mar 06 Javascript
JS继承--原型链继承和类式继承
Apr 08 Javascript
JS表格组件BootstrapTable行内编辑解决方案x-editable
Sep 01 Javascript
Bootstrap Table表格一直加载(load)不了数据的快速解决方法
Sep 17 Javascript
js 去掉字符串前后空格实现代码集合
Mar 25 Javascript
JS实现点击复选框变更DIV显示状态的示例代码
Dec 18 Javascript
安装Node.js并启动本地服务的操作教程
May 12 Javascript
AngularJS与BootStrap模仿百度分页的示例代码
May 23 Javascript
jQuery简单实现根据日期计算星期几的方法
Jan 09 jQuery
Javascript实现鼠标移入方向感知
Jun 24 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 字符串加密函数(在指定时间内加密还原字符串,超时无法还原)
2010/04/28 PHP
Yii实现多数据库主从读写分离的方法
2014/12/29 PHP
PHP JSON格式的中文显示问题解决方法
2015/04/09 PHP
php准确获取文件MIME类型的方法
2015/06/17 PHP
php连接mysql之mysql_connect()与mysqli_connect()的区别
2020/07/19 PHP
Javascript与flash交互通信基础教程
2008/08/07 Javascript
简短几句jquery代码的实现一个图片向上滚动切换
2011/09/02 Javascript
用jQuery中的ajax分页实现代码
2011/09/20 Javascript
Javascript写入txt和读取txt文件示例
2014/02/12 Javascript
javascript实现计时器的简单方法
2016/02/21 Javascript
bootstrap-table组合表头的实现方法
2017/09/07 Javascript
Vue 源码分析之 Observer实现过程
2018/03/29 Javascript
JS学习笔记之贪吃蛇小游戏demo实例详解
2019/05/29 Javascript
[02:27]2018DOTA2亚洲邀请赛赛前采访-OpTic
2018/04/03 DOTA
[52:20]DOTA2-DPC中国联赛正赛 SAG vs XGBO3 第一场 3月5日
2021/03/11 DOTA
python mysqldb连接数据库
2009/03/16 Python
Python实现的文本编辑器功能示例
2017/06/30 Python
Python3.6.0+opencv3.3.0人脸检测示例
2018/05/25 Python
Python中__slots__属性介绍与基本使用方法
2018/09/05 Python
python 实现矩阵上下/左右翻转,转置的示例
2019/01/23 Python
Python3最长回文子串算法示例
2019/03/04 Python
浅谈PySpark SQL 相关知识介绍
2019/06/14 Python
Python 的AES加密与解密实现
2019/07/09 Python
pytorch 数据处理:定义自己的数据集合实例
2019/12/31 Python
使用keras实现非线性回归(两种加激活函数的方式)
2020/07/05 Python
python性能测试工具locust的使用
2020/12/28 Python
基于HTML5 的人脸识别活体认证的实现方法
2016/06/22 HTML / CSS
Expedia瑞典官网:预订度假屋、酒店、汽车租赁、机票等
2021/01/23 全球购物
东方通信股份有限公司VC面试题
2014/08/27 面试题
Java基础面试题
2012/11/02 面试题
兼职学生的自我评价
2013/11/24 职场文书
银行学习十八大感想
2014/01/11 职场文书
大学生求职计划书
2014/04/30 职场文书
离婚起诉书范本
2015/05/18 职场文书
Nginx代理同域名前后端分离项目的完整步骤
2021/03/31 Servers
python中出现invalid syntax报错的几种原因分析
2022/02/12 Python