当前位置:Gxlcms > JavaScript > jquery实现跳到底部,回到顶部效果的简单实例(类似锚)

jquery实现跳到底部,回到顶部效果的简单实例(类似锚)

时间:2021-07-01 10:21:17 帮助过:7人阅读

实例如下:

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>jquery实现跳到底部,回到顶部效果的简单实例(类似锚)</title>
  6. <script src="jquery-1.4.4.min.js" type="text/javascript"></script>
  7. <script type="text/javascript">
  8. jQuery(function(){
  9. $('#top').click(function(){$('html,body').animate({scrollTop: '0px'}, 1000);return false;});
  10. $('#foot').click(function(){$('html,body').animate({scrollTop: $('#footer').offset().top},1000);return false;});
  11. })
  12. </script>
  13. </head>
  14. <body>
  15. <br /><br /><br /><br /><br />
  16. <br /><br /><br /><br /><br />
  17. <a href="#" id="foot">跳到底部</a>
  18. <br/><br /><br /><br />
  19. <br/><br /><br /><br />
  20. <br/><br /><br /><br />
  21. <br/><br /><br /><br />
  22. <br/><br /><br /><br />
  23. <br/><br /><br /><br />
  24. <br/><br /><br /><br />
  25. <br/><br /><br /><br />
  26. <br/><br /><br /><br />
  27. <br/><br /><br /><br />
  28. <br/><br /><br /><br />
  29. <a href="#" id="top"> 返 回 顶 部 </a>
  30. <br /><br /><br /><br /><br />
  31. <br /><br /><br /><br /><br />
  32. <a name="footer" id="footer"></a>
  33. </body>
  34. </html>

以上这篇jquery实现跳到底部,回到顶部效果的简单实例(类似锚)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。

人气教程排行