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 相关文章推荐
让iframe子窗体取父窗体地址栏参数(querystring)
Oct 13 Javascript
jquery获取input的value问题说明
Aug 19 Javascript
js 验证密码强弱的小例子
Mar 21 Javascript
js实现简单的星级选择器提交效果适用于评论等
Oct 18 Javascript
JavaScript前端图片加载管理器imagepool使用详解
Dec 29 Javascript
Javascript实现单例模式
Jan 24 Javascript
AngularJS 入门教程之事件处理器详解
Aug 19 Javascript
Angular ng-repeat指令实例以及扩展部分
Dec 26 Javascript
微信小程序 解决swiper不显示图片的方法
Jan 04 Javascript
AngularJS动态菜单操作指令
Apr 25 Javascript
express框架实现基于Websocket建立的简易聊天室
Aug 10 Javascript
JS变量提升及函数提升实例解析
Sep 03 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中批量生成静态html(命令行下运行PHP)
2014/04/19 PHP
Yii中创建自己的Widget实例
2016/01/05 PHP
PHP简单操作MongoDB的方法(安装及增删改查)
2016/05/26 PHP
Yii2中使用asset压缩js,css文件的方法
2016/11/24 PHP
php 输出缓冲 Output Control用法实例详解
2020/03/03 PHP
常用js脚本
2006/12/03 Javascript
Jquery中显示隐藏的实现代码分析
2011/07/26 Javascript
JavaScript避免代码的重复执行经验技巧分享
2014/04/17 Javascript
通过Jquery的Ajax方法读取将table转换为Json
2014/05/31 Javascript
JS合并数组的几种方法及优劣比较
2014/09/19 Javascript
jQuery内容过滤选择器用法示例
2016/09/09 Javascript
jQuery插件echarts实现的去掉X轴、Y轴和网格线效果示例【附demo源码下载】
2017/03/04 Javascript
Angular2使用Angular CLI快速搭建工程(一)
2017/05/21 Javascript
nodejs利用ajax实现网页无刷新上传图片实例代码
2017/06/06 NodeJs
使用 UniApp 实现小程序的微信登录功能
2020/06/09 Javascript
使用Vant完成通知栏Notify的提示操作
2020/11/11 Javascript
elementui实现预览图片组件二次封装
2020/12/29 Javascript
Python正则表达式的使用范例详解
2014/08/08 Python
分享Python文本生成二维码实例
2016/01/06 Python
Python实现全角半角字符互转的方法
2016/11/28 Python
windows下Virtualenvwrapper安装教程
2017/12/13 Python
python自动发邮件库yagmail的示例代码
2018/02/23 Python
基于numpy.random.randn()与rand()的区别详解
2018/04/17 Python
对python判断是否回文数的实例详解
2019/02/08 Python
Python Django view 两种return的实现方式
2020/03/16 Python
css3 transform过渡抖动问题解决
2020/10/23 HTML / CSS
HTML5的一个显示电池状态的API简介
2015/06/18 HTML / CSS
Rakuten Kobo台湾:电子书、eReaders和Reading应用程式
2017/11/24 全球购物
德国内衣、泳装和睡衣网上商店:Bigsize Dessous
2018/07/09 全球购物
介绍一下Java中的static关键字
2012/05/12 面试题
人事部主管岗位职责
2013/12/26 职场文书
二年级语文教学反思
2014/02/02 职场文书
食堂采购员岗位职责
2014/03/17 职场文书
开发房地产协议书
2014/09/14 职场文书
background-position百分比原理详解
2021/05/08 HTML / CSS
详解缓存穿透击穿雪崩解决方案
2021/05/28 Redis