×

跳到底部,回到顶部效果

作者:qilongzhu2018.02.07来源:Web前端之家浏览:10808评论:0
关键词:JQueryJS

跳到底部,回到顶部效果.

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jquery实现跳到底部,回到顶部效果的简单实例(类似锚)</title>
<script src="/demo/js/jq.js" type="text/javascript"></script>
<script type="text/javascript">
 jQuery(function(){
  $('#top').click(function(){$('html,body').animate({scrollTop: '0px'}, 1000);return false;});
  $('#foot').click(function(){$('html,body').animate({scrollTop: $('#footer').offset().top},1000);return false;});
 })
</script>
</head>
<body>
<br /><br /><br /><br /><br />
<br /><br /><br /><br /><br />
<a href="#" id="foot">跳到底部</a>
<br/><br /><br /><br />
<br/><br /><br /><br />
<br/><br /><br /><br />
<br/><br /><br /><br />
<br/><br /><br /><br />
<br/><br /><br /><br />
<br/><br /><br /><br />
<br/><br /><br /><br />
<br/><br /><br /><br />
<br/><br /><br /><br />
<br/><br /><br /><br />
<a href="#" id="top"> 返 回 顶 部 </a>
<br /><br /><br /><br /><br />
<br /><br /><br /><br /><br />
<a name="footer" id="footer"></a>
</body>
</html>

您的支持是我们创作的动力!
温馨提示:本文作者系 ,经Web前端之家编辑修改或补充,转载请注明出处和本文链接:
https://www.jiangweishan.com/article/svg1483286400699.html

网友评论文明上网理性发言 已有0人参与

发表评论: