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 相关文章推荐
jQuery根据用户电脑是mac还是pc加载对应样式的方法
Jun 26 Javascript
CSS图片响应式 垂直水平居中
Aug 14 Javascript
js与applet相互调用的方法
Jun 22 Javascript
js复制内容到剪贴板代码,js复制代码的简单实例
Oct 27 Javascript
基于canvas的二维码邀请函生成插件
Feb 14 Javascript
微信小程序开发之IOS和Android兼容的问题
Sep 26 Javascript
Vue引用第三方datepicker插件无法监听datepicker输入框的值的解决
Jan 27 Javascript
VueJs组件之父子通讯的方式
May 06 Javascript
浅谈Webpack 是如何加载模块的
May 24 Javascript
vue中通过使用$attrs实现组件之间的数据传递功能
Sep 01 Javascript
微信小程序背景音乐开发详解
Dec 12 Javascript
详细介绍Next.js脚手架完整搭建封装
Apr 26 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/03/24 PHP
thinkphp的c方法使用示例
2014/02/24 PHP
JavaScript去掉数组中的重复元素
2011/01/13 Javascript
基于JQuery的列表拖动排序实现代码
2013/10/01 Javascript
使用JQUERY进行后台页面布局控制DIV实现左右式
2014/01/07 Javascript
scrollWidth,clientWidth,offsetWidth的区别
2015/01/13 Javascript
果断收藏9个Javascript代码高亮脚本
2016/01/06 Javascript
node.js实现端口转发
2016/04/14 Javascript
JS闭包、作用域链、垃圾回收、内存泄露相关知识小结
2016/05/16 Javascript
基于JavaScript实现鼠标箭头移动图片跟着移动
2016/08/30 Javascript
值得学习的bootstrap fileinput文件上传工具
2016/11/08 Javascript
javascript中setAttribute兼容性用法分析
2016/12/12 Javascript
Vue.js自定义指令的用法与实例解析
2017/01/18 Javascript
node.js基于express使用websocket的方法
2017/11/09 Javascript
vue中简单弹框dialog的实现方法
2018/02/26 Javascript
node.js实现为PDF添加水印的示例代码
2018/12/05 Javascript
nodejs实现获取本地文件夹下图片信息功能示例
2019/06/22 NodeJs
JS箭头函数和常规函数之间的区别实例分析【 5 个区别】
2020/05/27 Javascript
javascript实现简单留言板案例
2021/02/09 Javascript
[03:36]DOTA2完美大师赛coL战队趣味视频——我演你猜
2017/11/23 DOTA
[00:15]TI9观赛名额抽取
2019/07/10 DOTA
[01:08:30]DOTA2-DPC中国联赛 正赛 Ehome vs Elephant BO3 第一场 2月28日
2021/03/11 DOTA
跟老齐学Python之网站的结构
2014/10/24 Python
Python 类的继承实例详解
2017/03/25 Python
python的numpy模块安装不成功简单解决方法总结
2017/12/23 Python
pandas 数据结构之Series的使用方法
2019/06/21 Python
Pycharm激活码激活两种快速方式(附最新激活码和插件)
2020/03/12 Python
python 基于opencv去除图片阴影
2021/01/26 Python
使用css3实现超炫的loading加载动画效果
2014/05/07 HTML / CSS
美国最大的船只买卖在线市场:Boat Trader
2018/08/04 全球购物
Kivari官网:在线购买波西米亚服装
2018/10/29 全球购物
Java中的基本数据类型所占存储空间大小固定的吗
2012/02/15 面试题
小学生环保倡议书
2014/05/15 职场文书
出纳工作检讨书范文
2014/12/27 职场文书
Python机器学习之KNN近邻算法
2021/05/14 Python
MySQL优化之慢日志查询
2022/06/10 MySQL