jQuery返回顶部实用插件

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;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;">
22. </div>
23. <div style="100%;text-align:center;height:200px">© 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>
=============仅供参考===========
相关阅读:
玩转树莓派《二》——用python实现动画与多媒体
 pygame(一)
玩转树莓派（一）
pythonchallenge(七)
springmvc定时器
 maven打包成第三方jar包且把pom依赖包打入进来
 mybatis之动态SQL
黑马12期day01之html&css
千万级数据表删除特定字断
 自动跳转
原文地址：https://www.cnblogs.com/xm1-ybtk/p/5099768.html