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 相关文章推荐
Javascript继承机制的设计思想分享
Aug 28 Javascript
js写一个弹出层并锁屏效果实现代码
Dec 07 Javascript
javascript基本类型详解
Nov 28 Javascript
JavaScript中number转换成string介绍
Dec 31 Javascript
jQuery圆形统计图开发实例
Jan 04 Javascript
JSON格式的键盘编码对照表
Jan 29 Javascript
javascript定时器完整实例
Feb 10 Javascript
Bootstrap创建可折叠的组件
Feb 23 Javascript
聊一聊jQuery插件uploadify使用方法
Aug 24 Javascript
浅谈js中用$(#ID)来作为选择器的问题(id重复的时候)
Feb 14 Javascript
vue使用screenfull插件实现全屏功能
Sep 17 Javascript
Openlayers实现点闪烁扩散效果
Sep 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产生随机字符串函数
2006/12/06 PHP
CodeIgniter采用config控制的多语言实现根据浏览器语言自动转换功能
2014/07/18 PHP
浅谈PHP中单引号和双引号到底有啥区别呢?
2015/03/04 PHP
PHP递归实现文件夹的复制、删除、查看大小操作示例
2017/08/11 PHP
php语法检查的方法总结
2019/01/21 PHP
Open and Print a Word Document
2007/06/15 Javascript
jquery使用jxl插件导出excel示例
2014/04/14 Javascript
js操作输入框中选择内容兼容IE及其他主流浏览器
2014/04/22 Javascript
js在指定位置增加节点函数insertBefore()用法实例
2015/01/12 Javascript
JavaScript中的this到底是什么(一)
2015/12/09 Javascript
BootStrap智能表单实战系列(九)表单图片上传的支持
2016/06/13 Javascript
多种方式实现js图片预览
2016/12/12 Javascript
全面解析Node.js 8 重要功能和修复
2017/06/02 Javascript
Ionic3实现图片瀑布流布局
2017/08/09 Javascript
jQuery实现菜单的显示和隐藏功能示例
2018/07/24 jQuery
js定义类的方法示例【ES5与ES6】
2019/07/30 Javascript
python定时采集摄像头图像上传ftp服务器功能实现
2013/12/23 Python
Pthon批量处理将pdb文件生成dssp文件
2015/06/21 Python
python字符串过滤性能比较5种方法
2017/06/22 Python
Python常用爬虫代码总结方便查询
2019/02/25 Python
Python考拉兹猜想输出序列代码实践
2019/07/05 Python
详解pandas数据合并与重塑(pd.concat篇)
2019/07/09 Python
python的time模块和datetime模块实例解析
2019/11/29 Python
Python异步编程之协程任务的调度操作实例分析
2020/02/01 Python
python pillow库的基础使用教程
2021/01/13 Python
CSS3中Color的一些特性介绍
2012/05/27 HTML / CSS
Auchan Direct波兰:欧尚在线杂货店
2016/10/19 全球购物
校园招聘策划书
2014/01/09 职场文书
《傅雷家书》教学反思
2014/04/20 职场文书
美化环境标语
2014/06/20 职场文书
单位法定代表人授权委托书
2014/09/20 职场文书
支部书记四风问题对照检查材料
2014/10/04 职场文书
离婚案件上诉状
2015/05/23 职场文书
《金钱的魔力》教学反思
2016/02/20 职场文书
原生Js 实现的简单无缝滚动轮播图的示例代码
2021/05/10 Javascript
《艾尔登法环》发布最新「战技」宣传片
2022/04/03 其他游戏