zoukankan      html  css  js  c++  java
  • jquery点击回到页面顶部方法

    1.代码实例

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>05-jQuery- 回到顶部案例</title>
        <style>
            .bk-top-box {
                position: fixed;
                bottom: 40px;
                right: 10px;
                cursor: pointer;
            }
        </style>
        <script src="jquery-1.11.3.js"></script>
        <script>
            $(function(){
                $("#J-bk-top").on('click',function(){
                    $(window).scrollTop(0);
                    $(window).scrollLeft(0);
                });
    
                $("#J_Box").on('click','h1',function(){
                    //this  jQuery的事件响应方法中,this指向被点击的 dom对象
                    this.innerHTML += '-';
    
                    //dom对象转换成 jQuery对象
                    $(this).text($(this).text() + 1);
                });
            });
        </script>
    </head>
    <body>
        <div class="bk-top-box" id="J-bk-top">
            <img src="imgs/bk-top3.jpg" height="44" width="44" alt="">
        </div>
    
        <!-- ctrl + shift + g  自动包裹标签 -->
         <div id="J_Box">
             <h1>传智播客1</h1>
             <h1>传智播客2</h1>
             <h1>传智播客3</h1>
             <h1>传智播客</h1>
             <h1>传智播客</h1>
             <h1>传智播客</h1>
             <h1>传智播客</h1>
             <h1>传智播客</h1>
             <h1>传智播客</h1>
             <h1>传智播客</h1>
             <h1>传智播客</h1>
             <h1>传智播客</h1>
             <h1>传智播客</h1>
             <h1>传智播客</h1>
             <h1>传智播客</h1>
             <h1>传智播客</h1>
             <h1>传智播客</h1>
             <h1>传智播客</h1>
             <h1>传智播客</h1>
             <h1>传智播客</h1>
             <h1>传智播客</h1>
             <h1>传智播客</h1>
             <h1>传智播客</h1>
             <h1>传智播客</h1>
             <h1>传智播客</h1>
             <h1>传智播客</h1>
             <h1>传智播客</h1>
             <h1>传智播客</h1>
             <h1>传智播客</h1>
             <h1>传智播客</h1>
         </div>
    </body>
    </html>

    2.实际效果

     

  • 相关阅读:
    面向对象七大设计原则
    S2第六章
    S2第四章
    大数据Hadoop——HDFS Shell操作
    大数据Hadoop——初识Hadoop
    ssh整合oracle数据源报错????
    关于Struts2的通配方法、转发重定向
    SSH实现ajax
    关于Struts2自动装配和访问Servlet API
    Oracle函数
  • 原文地址:https://www.cnblogs.com/mr-wuxiansheng/p/6363605.html
Copyright © 2011-2022 走看看