用jquery实现动画跳到顶部和底部(这个比较简单)

前端技术 2023/09/05 JavaScript

当点击顶部按钮的时候，执行方法,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>

本文地址：https://www.stayed.cn/item/13269

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案