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

    jq相对于原生用的代码要少一些,比如返回顶部

    html部分

    <div class="backTop" id="backTop" style="display:none;"></div>

    css部分

    .backTop{
        45px;
        height:45px;
        background:#615f5f;
        opacity: .7;
        position:fixed;
        right:1%;
        bottom:12%;
        z-index:999;
        cursor:pointer;
    }
    
    .backTop:hover{
        background:#464444;
    }
    
    .backTop:hover:after{
        border-bottom:.2rem solid #0188cc;
        border-left:.2rem solid #0188cc;
    
    }
    
    .backTop:after{
        display:inline-block;
        content:'';
        1rem;
        height:1rem;
        border-bottom:.2rem solid #fff;
        border-left:.2rem solid #fff;
        transform:scaleX(0.5) rotateZ(138deg);
        -webkit-transform:scaleX(0.7) rotateZ(136deg);
        position:absolute;
        left:13px;
        top:19px;
    
    }

    js部分

    $(window).scroll(function(){
        var scrollValue = $(window).scrollTop();
        scrollValue >400 ? $('#backTop').fadeIn():$('#backTop').fadeOut();
    });
    $('#backTop').click(function(){
        $('html,body').animate({scrollTop:0},300);
    });
  • 相关阅读:
    emacs jedi
    opencv 基本demo
    emacs列编辑
    observable operator example
    angular keydown 例子
    回调和匿名函数
    gin cors
    angular rxjs
    python dbus note
    视频截图
  • 原文地址:https://www.cnblogs.com/theblogs/p/9943785.html
Copyright © 2011-2022 走看看