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学习内容
  • 相关阅读:
    例程详解
    js对数组中有相似属性对象进行合并
    javaScript放大镜特效
    css改变图标颜色
    js自定义日历
    vuecli4.0配置公共scss样式文件
    iframe根据子页面的内容来设置高度
    iframe父子页面交互
    artTemplate模板自定义函数
    javascript数组的增删改和查询
  • 原文地址:https://www.cnblogs.com/wangtc/p/10576258.html
Copyright © 2011-2022 走看看