编程 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中的$(document).ready()与window.onload的区别

Nov 18 Javascript

利用js实现选项卡的特别效果的实例

Mar 03 Javascript

javascript 寻找错误方法整理

Jun 15 Javascript

使用jQuery实现返回顶部

Jan 26 Javascript

JavaScript原生节点操作小结

Jan 17 Javascript

anime.js 实现带有描边动画效果的复选框（推荐）

Dec 24 Javascript

JS使用队列对数组排列，基数排序算法示例

Mar 02 Javascript

vue axios封装及API统一管理的方法

Apr 18 Javascript

vue实现跨域的方法分析

May 21 Javascript

Vue数字输入框组件使用方法详解

Feb 10 Javascript

JavaScript设计模式--桥梁模式引入操作实例分析

May 23 Javascript

js轮播图之旋转木马效果

Oct 13 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