zoukankan      html  css  js  c++  java

  • 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;">  
    21.          
    22.     </div>  
    23.     <div style="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>  

    =============仅供参考===========
  • 相关阅读:
    Spring学习总结（3）——Spring配置文件详解
    Hadoop学习总结（1）——大数据以及Hadoop相关概念介绍
    华为云文字识别关键技术和特别需要注意的事宜
    如何不用BPM配置时间
    华为云DevCloud为开发者提供高效智能的可信开发环境
    【HC资料合集】2019华为全联接大会主题资料一站式汇总，免费下载！
    在modelarts上部署mask-rcnn模型
    独立物理机和虚拟机比较有什么优势？
    解惑Python模块学习，该如何着手操作...
    sar命令，linux中最为全面的性能分析工具之一
  • 原文地址：https://www.cnblogs.com/xm1-ybtk/p/5099768.html
Copyright © 2011-2022 走看看