用jquery实现动画跳到顶部和底部(这个比较简单)
更新时间：2014年09月01日 09:39:25 投稿：whsnow
用jquery实现动画的跳到顶部和底部，当点击顶部按钮的时候，执行方法,scrollTop属性获取选中标签距滚动条的距离
当点击顶部按钮的时候，执行方法,scrollTop属性获取选中标签距滚动条的距离，当点击底部标签时候，执行方法，其中offset()获取匹配元素在当前视口的相对偏移
<!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>
相关文章
想在页面加载完成后，有几个地方显示当前时间，所以想通过jquery给多个span赋值,需要的朋友可以参考下2014-05-05
这篇文章主要介绍了jQuery中last()方法用法,实例分析了last()方法获取匹配元素集合中的最后一个元素时的使用技巧,需要的朋友可以参考下2015-01-01
使用jQuery UI的tooltip函数修饰title属性的气泡悬浮框
使用jQuery UI的tooltip()函数，可以使悬浮提示框不再那么千篇一律，以下是完整的代码，感兴趣的朋友可以参考下哈，希望对大家有所帮助2013-06-06
主要是利用了jquery的attr为行添加样式来实现的，具体的代码如下。2009-12-12
使用jquery DataTable和ajax向页面显示数据列表的方法
今天小编就为大家分享一篇使用jquery DataTable和ajax向页面显示数据列表的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-08-08
fadeOut() 方法逐渐改变被选元素的不透明度，从可见到隐藏（褪色效果）。这篇文章给大家介绍jquery fadeout异步实例代码，感兴趣的朋友一起看下吧2016-08-08
现在很多网站都用不规则矩形来罗列图片，ipad上面很多应该用也都是用的不规则的矩形，但是还要让他们各自都靠近排列，不能有空隙2012-04-04
最近在做手机上的web app，很多场景需要使用到类似tab切换和图片轮播的东西，需要支持手势和鼠标点击的，于是就基于jquery弄了一个，每一个参数有详细的说明2012-07-07
这篇文章主要介绍了jQuery实现侧浮窗与中浮窗切换效果的方法,涉及jQuery针对页面元素的动态操作技巧,需要的朋友可以参考下2016-09-09
这篇文章主要介绍了jQuery控制文本框只能输入数字和字母及使用方法的相关资料，非常不错而且实用性也很高,需要的朋友可以参考下2016-05-05
最新评论