编程 Javascript

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之选择组件的深入解析

Jun 19 Javascript

异步动态加载js与css文件的js代码

Sep 15 Javascript

jQuery实现垂直半透明手风琴特效代码分享

Aug 21 Javascript

js面向对象的写法

Feb 19 Javascript

喜大普奔！jQuery发布 3.0 最终版

Jun 12 Javascript

AngularJS入门教程之路由与多视图详解

Aug 19 Javascript

Ajax与服务器（JSON）通信实例代码

Nov 05 Javascript

使用jQuery的ajax方法向服务器发出get和post请求的方法

Jan 13 Javascript

Vue响应式添加、修改数组和对象的值

Mar 20 Javascript

解决在vue+webpack开发中出现两个或多个菜单公用一个组件问题

Nov 28 Javascript

使用 electron 实现类似新版 QQ 的登录界面效果(阴影、背景动画、窗体3D翻转)

Oct 23 Javascript

解决vue中provide inject的响应式监听

Apr 19 Vue.js

公共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