zoukankan      html  css  js  c++  java
  • 一句jQuery代码返回顶部

    一句jQuery代码返回顶部

    效果体验:

    http://hovertree.com/texiao/yestop/

    使用方法:

    只需引用jQuery库和YesTop插件,然后一句代码就可以实现返回顶部:

    引用代码:
    <script type="text/javascript" src="http://hovertree.com/ziyuan/jquery/jquery-1.11.3.min.js"></script>
    <script type="text/javascript" src="http://hovertree.com/texiao/yestop/inc/jquery.yestop.js"></script>

    使用代码:
    <script type="text/javascript">
         $(document).ready(function () { $.fn.yestop(); })
    </script>
    也就是:
    $.fn.yestop();

    这句代码就可以了。
    当然还有高级的设置,如换图片,设置图标为圆形,设置位置,设置时间等等。详情请查看其他Demo。
    完整代码,保存到HTML文件就可以体验效果:
    <!DOCTYPE html>
    <html>
    <head><meta charset="UTF-8">
        <title>YesTop - HoverTree</title><meta name="viewport" content="width=device-width, initial-scale=1.0">
        <script type="text/javascript" src="http://hovertree.com/ziyuan/jquery/jquery-1.11.3.min.js"></script>
        <script type="text/javascript" src="http://hovertree.com/texiao/yestop/inc/jquery.yestop.js"></script>
        <style>
            body {
                margin: 0px;font-family:Arial
            }a{color:blue}
        </style>
    </head>
    <body>
        <div style="text-align:center;100%;margin:0px auto;">
            <h1>YesTop</h1>
            A jQuery Plugin<br />
            <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>
            <a href="http://hovertree.com/texiao/yestop/demo4.htm">Demo 4</a> <a href="http://hovertree.com/h/bjaf/topimage.htm">Images</a>
        </div>
        <div style="height: 360px;background-color: #66FF66;">
           
        </div>
        <div style="100%;text-align:center;height:200px">&copy; hovertree.com</div>    
        <div style="height: 200px; visibility: visible; background-color: Olive">
        </div><div style="height:200px;background-color:burlywood"></div><div style="height:200px;background-color:darkorchid"></div>
        <div style="height: 200px; visibility: visible; background-color:gray">
        </div>
        <div style="height:200px;background-color:blue"></div>
        <div style="height:200px;background-color:red"></div>
        <div style="height:200px;background-color:yellow"></div>
        <div style="height:200px;background-color:yellowgreen"></div>
        <div style="height:800px;background-color:white"></div>
        <script type="text/javascript">
            $(document).ready(function () { $.fn.yestop(); })
        </script>
    </body>
    </html>

    更多:http://www.cnblogs.com/roucheng/p/texiao.html

  • 相关阅读:
    java操作生成jar包 和写入jar包
    jboss配置jndi连接池
    windows 域的LDAP查询相关举例
    LDAP error Code 及解决方法
    HDU 6417
    CF1299D Around the World
    codechef Chef and The Colored Grid
    Educational Codeforces Round 82 (Rated for Div. 2)
    CF1237F Balanced Domino Placements
    CF1254E Send Tree to Charlie
  • 原文地址:https://www.cnblogs.com/roucheng/p/yestop.html
Copyright © 2011-2022 走看看