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 相关文章推荐
Save a File Using a File Save Dialog Box
Jun 18 Javascript
jQuery ui 1.7更新小结
Aug 15 Javascript
基于JQuery的列表拖动排序实现代码
Oct 01 Javascript
JavaScript中停止执行setInterval和setTimeout事件的方法
May 14 Javascript
JS弹出对话框实现方法(三种方式)
Dec 18 Javascript
js创建对象的方法汇总
Jan 07 Javascript
全面解析Bootstrap中Carousel轮播的使用方法
Jun 13 Javascript
微信小程序 仿猫眼实现实例代码
Mar 14 Javascript
利用node.js本地搭建HTTP服务器
Apr 19 Javascript
Vue项目中跨域问题解决方案
Jun 05 Javascript
jQuery实现倒计时功能完整示例
Jun 01 jQuery
JavaScript实现雪花飘落效果
Dec 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
下载文件的点击数回填
2006/10/09 PHP
php不写闭合标签的好处
2014/03/04 PHP
php生成数字字母的验证码图片
2015/07/14 PHP
编写自己的jQuery插件简单实现代码
2011/04/19 Javascript
JavaScript 验证码的实例代码(附效果图)
2013/03/22 Javascript
Jquery ajaxStart()与ajaxStop()方法(实例讲解)
2013/12/18 Javascript
Jquery插件编写简明教程
2014/03/25 Javascript
javascript中Function类型详解
2015/04/28 Javascript
有关Promises异步问题详解
2015/11/13 Javascript
JAVASCRIPT代码编写俄罗斯方块网页版
2015/11/26 Javascript
javascript返回顶部的按钮实现方法
2016/01/09 Javascript
jQuery获取checkbox选中的值
2016/01/28 Javascript
JS中用childNodes获取子元素换行会产生一个子元素
2016/12/08 Javascript
JavaScript使用readAsDataURL读取图像文件
2017/05/10 Javascript
React学习笔记之条件渲染(一)
2017/07/02 Javascript
JS表单传值和URL编码转换
2018/03/03 Javascript
vue.js多页面开发环境搭建过程
2019/04/24 Javascript
jquery实现选项卡切换代码实例
2019/05/14 jQuery
vue.js实现h5机器人聊天(测试版)
2020/07/16 Javascript
JavaScript中while循环的基础使用教程
2020/08/11 Javascript
Python 异常处理的实例详解
2017/09/11 Python
Python实现针对给定字符串寻找最长非重复子串的方法
2018/04/21 Python
python 处理微信对账单数据的实例代码
2019/07/19 Python
基于python实现FTP文件上传与下载操作(ftp&amp;sftp协议)
2020/04/01 Python
浅谈JupyterNotebook导出pdf解决中文的问题
2020/04/22 Python
Java Unsafe类实现原理及测试代码
2020/09/15 Python
python连接手机自动搜集蚂蚁森林能量的实现代码
2021/02/24 Python
详解CSS3中常用的样式【基本文本和字体样式】
2020/10/20 HTML / CSS
加拿大最大的五金、家居装修和园艺产品商店:RONA
2017/01/27 全球购物
意大利领先的线上奢侈品销售电商:Eleonora Bonucci
2017/10/17 全球购物
伯利陶器:Burleigh Pottery
2018/01/03 全球购物
工厂总经理岗位职责
2014/02/07 职场文书
小学秋季运动会报道稿
2014/09/30 职场文书
2015年餐厅服务员工作总结
2015/04/23 职场文书
大学生党课感想
2015/08/11 职场文书
vue中使用mockjs配置和使用方式
2022/04/06 Vue.js