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.实际效果

     

  • 相关阅读:
    相交链表 3种方法
    旋转数组 空间复杂度为O(1) 的2 种方法 + 1种空间复杂度O(n)
    各种sort排序总结
    我写过的bug...
    裸BFS题若干
    luence
    mysql 找出外键等约束
    mysql (8.0 或以下)数据 卸载, 安装, 创建用户, 赋权
    navicat 导入sql文件 的正确方法
    [转] git clone 远程分支
  • 原文地址:https://www.cnblogs.com/mr-wuxiansheng/p/6363605.html
Copyright © 2011-2022 走看看