zoukankan      html  css  js  c++  java
  • 返回顶部

    小知识:

    $(window).scrollTop()---获取当前滚轮滑动的值

    $(window).scrollTop(0)----括号中为0则为回到顶部

    代码示例:

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
    .hide{
    display:none;
    }
    .returnTop{
    height: 60px;
    100px;
    background-color: darkgray;
    position: fixed;
    right: 0;
    bottom: 0;
    color: greenyellow;
    line-height: 60px;
    text-align: center;
    </style>
    </head>
    <body>
    <div class="div1 div">
    <p>hello</p>
    <p>hello</p>
    <p>hello</p>
    <p>hello</p>
    <p>hello</p>
    <p>hello</p>
    <p>hello</p>
    <p>hello</p>
    <p>hello</p>
    <p>hello</p>
    <p>hello</p>
    <p>hello</p>
    <p>hello</p>
    <p>hello</p>
    <p>hello</p>
    <p>hello</p>
    <p>hello</p>
    <p>hello</p>

    </div>
    <div class="div2 div"></div>
    <div class="div3 div"></div>
    <div class="returnTop hide" onclick="returnTop();">返回顶部</div>
    <script src="jquery-3.2.1.js"></script>
    <script>
    // 点击事件
    function returnTop() {

    $(window).scrollTop(0)
    }


    //滚轮事件
    window.onscroll=function () {
    var current=$(window).scrollTop();
    if(current>10){
    $('.returnTop').removeClass('hide')
    }else{
    $('.returnTop').addClass('hide')
    }
    }

    </script>
    </body>
    </html>
    Java学习内容
  • 相关阅读:
    【滚动数组】 dp poj 1036
    【多重背包】 poj 2392
    【树状数组】 poj 2352
    【矩阵压缩】 poj 1050
    【八皇后问题】 回溯算法
    【矩阵加速】 矩阵 快速幂
    【快速幂】 模板
    【二分图】 判断是否是二分图
    Struts2标签库
    Struts2之获取ServletAPI
  • 原文地址:https://www.cnblogs.com/wangtc/p/10576258.html
Copyright © 2011-2022 走看看