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 相关文章推荐
我见过最全的个人js加解密功能页面
Dec 12 Javascript
面向对象的Javascript之三(封装和信息隐藏)
Jan 27 Javascript
JavaScript给url网址进行encode编码的方法
Mar 18 Javascript
如何改进javascript代码的性能
Apr 02 Javascript
js实现TAB切换对应不同颜色的代码
Aug 31 Javascript
基于JavaScript实现跳转提示页面
Sep 24 Javascript
jQuery基于ajax操作json数据简单示例
Jan 05 Javascript
微信小程序技巧之show内容展示,上传文件编码问题
Jan 23 Javascript
Vuex简单入门
Apr 19 Javascript
Angular在模板驱动表单中自定义校验器的方法
Aug 09 Javascript
layui数据表格重载实现往后台传参
Nov 15 Javascript
element日历calendar组件上月、今天、下月、日历块点击事件及模板源码
Jul 27 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常量的详解
2013/06/09 PHP
Fleaphp常见函数功能与用法示例
2016/11/15 PHP
php5与php7的区别点总结
2019/10/11 PHP
jQuery学习笔记之jQuery的事件
2010/12/22 Javascript
js判断样式className同时增加class或删除class
2013/01/30 Javascript
jQuery中parent()方法用法实例
2015/01/07 Javascript
jquery获取checkbox的值并post提交
2015/01/14 Javascript
简介AngularJS中使用factory和service的方法
2015/06/17 Javascript
JavaScript制作简单的日历效果
2016/03/10 Javascript
js编写一个简单的产品放大效果代码
2016/06/27 Javascript
Bootstrap3制作搜索框样式的方法
2016/07/11 Javascript
微信小程序 rpx 尺寸单位详细介绍
2016/10/13 Javascript
JS给按钮添加跳转功能类似a标签
2017/05/30 Javascript
基于vue的短信验证码倒计时demo
2017/09/13 Javascript
微信小程序slider组件使用详解
2018/01/31 Javascript
nodejs更新package.json中的dependencies依赖到最新版本的方法
2018/10/10 NodeJs
JS匿名函数内部this指向问题详析
2019/05/10 Javascript
Preload基础使用方法详解
2020/02/03 Javascript
python从sqlite读取并显示数据的方法
2015/05/08 Python
使用Python的Scrapy框架十分钟爬取美女图
2016/12/26 Python
django限制匿名用户访问及重定向的方法实例
2018/02/07 Python
使用python装饰器计算函数运行时间的实例
2018/04/21 Python
python3下使用cv2.imwrite存储带有中文路径图片的方法
2018/05/10 Python
Python Requests库基本用法示例
2018/08/20 Python
python实现二维插值的三维显示
2018/12/17 Python
python GUI实现小球满屏乱跑效果
2019/05/09 Python
Python Django view 两种return的实现方式
2020/03/16 Python
使用python求斐波那契数列中第n个数的值示例代码
2020/07/26 Python
VIVOBAREFOOT赤脚鞋:让您的脚做自然的事情
2017/06/01 全球购物
销售队伍口号
2014/06/11 职场文书
党的群众路线教育实践活动自我剖析材料
2014/10/08 职场文书
2014年度个人工作总结
2014/11/07 职场文书
小升初自荐信怎么写
2015/03/26 职场文书
三傻大闹宝莱坞观后感
2015/06/03 职场文书
springboot+VUE实现登录注册
2021/05/27 Vue.js
vue route新窗口跳转页面并且携带与接收参数
2022/04/10 Vue.js