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>
=============仅供参考===========
相关阅读:
Elastic Search查询DSL的生成器
 清除Git仓库未托管的文件
 在Asp.net Core 中配置HTTPS支持
 VUE3的新构建工具Vite使用简介
 文档驱动 —— 表单组件（六）：基于AntDV的Form表单的封装，目标还是不写代码
 文档驱动 —— 查询组件：使用 vue3.0 的新特性，重构代码
 文档驱动 —— 表单组件（五）：基于Ant Design Vue 的表单控件的demo，再也不需要写代码了。
文档驱动 —— 表单组件（四）：基于Ant Design Vue封装一些表单域控件
 文档驱动 —— 表单组件（三）：基于原生html的表单组件demo
文档驱动 —— 表单组件（二）：meta生成器，告别书写代码
原文地址：https://www.cnblogs.com/xm1-ybtk/p/5099768.html