jQuery返回顶部实用插件

只需引用jQuery库和YesTop插件(jquery.yestop.js)，然后一句代码就可以实现返回顶部：

引用代码：

 

Html代码  收藏代码
  1. <script src="http://hovertree.com/ziyuan/jquery/jquery-1.11.3.min.js"></script>  
  2. <script src="http://hovertree.com/texiao/yestop/inc/jquery.yestop.js"></script>  

 使用代码：

 

 

Html代码  收藏代码
  1. <script>  
  2.      $(document).ready(function () { $.fn.yestop(); })  
  3. </script>  

 也就是：

$.fn.yestop();

 

这句代码就可以了。

当然还有高级的设置，如换图片，设置图标为圆形，设置位置，设置时间等等。

例如：

Js代码  收藏代码
  1. $.fn.yestop({  
  2.                 "yes_image": "http://hovertree.com/texiao/yestop/inc/yestoprocket.png"  
  3.                 , "yes_width": "48px", "yes_height": "125px" , "yes_time": 200  
  4.                 ,"yes_bottom":"20px","yes_right":"10px"  
  5.             });  

 

详情请查看其他Demo。

 

完整代码，保存到HTML文件就可以体验效果：

Html代码  收藏代码
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head><meta charset="UTF-8">  
  4.     <title>YesTop - HoverTree</title><meta name="viewport" content="width=device-width, initial-scale=1.0">  
  5.     <script type="text/javascript" src="http://hovertree.com/ziyuan/jquery/jquery-1.11.3.min.js"></script>  
  6.     <script type="text/javascript" src="http://hovertree.com/texiao/yestop/inc/jquery.yestop.js"></script>  
  7.     <style>  
  8.         body {  
  9.             margin: 0px;font-family:Arial  
  10.         }a{color:blue}  
  11.     </style>  
  12. </head>  
  13. <body>  
  14.     <div style="text-align:center;width:100%;margin:0px auto;">  
  15.         <h1>YesTop</h1>  
  16.         A jQuery Plugin<br />  
  17.         <a href="http://hovertree.com/texiao/yestop/">Demo 1</a> <a href="http://hovertree.com/texiao/yestop/demo2.htm">Demo 2</a> <a href="http://hovertree.com/texiao/yestop/demo3.htm">Demo 3</a>  
  18.         <a href="http://hovertree.com/texiao/yestop/demo4.htm">Demo 4</a> <a href="http://hovertree.com/h/bjaf/topimage.htm">Images</a>  
  19.     </div>  
  20.     <div style="height: 360px;#66FF66;">  
  21.          
  22.     </div>  
  23.     <div style="width:100%;text-align:center;height:200px">&copy; hovertree.com</div>      
  24.     <div style="height: 200px; visibility: visible; Olive">  
  25.     </div><div style="height:200px; font-weight: bold;">></div><div style="height:200px; font-weight: bold;">></div>  
  26.     <div style="height: 200px; visibility: visible;  font-weight: bold;">>  
  27.     </div>  
  28.     <div style="height:200px; font-weight: bold;">></div>  
  29.     <div style="height:200px; font-weight: bold;">></div>  
  30.     <div style="height:200px; font-weight: bold;">></div>  
  31.     <div style="height:200px; font-weight: bold;">></div>  
  32.     <div style="height:800px; font-weight: bold;">></div>  
  33.     <script type="text/javascript">  
  34.         $(document).ready(function () { $.fn.yestop(); })  
  35.     </script>  
  36. </body>  
  37. </html>  

 

=============仅供参考===========

posted @ 2016-01-04 17:44  烟-波-天-客  阅读(351)  评论(0)    收藏  举报