jquery的一个返回顶部底部滑动

Posted on Posted in js
Tips: 本文创建于2016年5月30日,已超过 2 年,内容或图片可能已经失效!

> code

  1. <head>  
  2. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
  3. <title>jQuery返回底部、返回顶部特效</title>  
  4. <script type="text/javascript" src="jquery-1.4.2.min.js"></script>  
  5. <style type="text/css">  
  6. body  
  7. {  
  8. margin:0; padding:0; font-size:12px;  
  9. }  
  10.   
  11. #main  
  12. {  
  13. width:910pxmargin:0 autoheight:2000px;  
  14. }  
  15. .go{width:47px;height:106px;position:fixed;_position:absolute;_top:expression(eval(document.documentElement.scrollTop+document.documentElement.clientHeight-this.offsetHeight-(parseInt(this.currentStyle.marginTop,10)||200)-(parseInt(this.currentStyle.marginBottom,10)||0)));rightright:12px;bottombottom:25%; background-image:url("/jscss/demoimg/201208/tobg.png"); background-repeat:no-repeat;}  
  16. .go a{background:url(/jscss/demoimg/201208/a.png) no-repeat;display:block;text-indent:999em;width:37px;margin:5px;border:0;overflow:hidden;float:leftcursor:pointer;}  
  17. .go .top{background-position:0 0px;height:22px}  
  18. .go .feedback{background-position:0 -22px;height:32px}  
  19. .go .bottombottom{background-position:0 -55px;height:22px}  
  20. .go .top:hover{background-position:-38px -0px}  
  21. .go .feedback:hover{background-position:-38px -22px}  
  22. .go .bottombottom:hover{background-position:-38px -55px}  
  23. </style>  
  24. <script type="text/javascript">  
  25.     $(function () {  
  26.   
  27.         $(".top").click(//定义返回顶部点击向上滚动的动画  
  28.         function () {  
  29.             $('html,body').animate({ scrollTop: 0 }, 700);  
  30.         });  
  31.         $(".bottom").click(//定义返回顶部点击向上滚动的动画  
  32.         function () {  
  33.             $('html,body').animate({ scrollTop: document.body.clientHeight }, 700);  
  34.         });  
  35.     })  
  36. </script>  
  37. </head>  
  38.   
  39. <body>  
  40. <div id="main">  
  41. <div class="go">  
  42.     <a title="返回顶部" class="top"></a>  
  43.     <a title="如果您有意见,请反馈给我们!" class="feedback" href="/guestbook/"&nb
    sp;target=
    "_blank"></a>  
  44.     <a title="返回底部" class="bottom" ></a>  
  45. </div>  
  46. </div>  
  47. </body>  
  48. </html>  

> 图片

![a.png][1]

![tobg.png][2]

[1]: http://liuhonghe.me/wp-content/uploads/2016/05/3895726450.png
[2]: http://liuhonghe.me/wp-content/uploads/2016/05/2200032652.png

Leave a Reply

Your email address will not be published. Required fields are marked *

nineteen + 6 =