zoukankan      html  css  js  c++  java
  • js点击回到顶部

    ---恢复内容开始---

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>点击回到页面顶部</title>
    <style type="text/css">
    *{margin: 0;padding: 0;}
    .scroll_top{60px;height: 60px;border: 1px solid red;position: fixed;bottom: 50px;right: 20px;display: none;}
    .scroll_top span{ 60px;height:60px ;display: block;background: url(img/icon_top.png) no-repeat center #20B2AA;border-radius:30px ;}
    </style>
     
    </head>
    <body>
    <pre>
    <img src="img/qq.png" />
    </pre>
    <div class="scroll_top">
    <span id="s_btn"></span>
    </div>
       
       <script type="text/javascript" src="js/jquery.js" ></script>
    <script type="text/javascript">
    $("#s_btn").click(function(){
    $("html,body").animate({
    scrollTop:0
    },100);
    });
     
    $(window).scroll(function(){
    if ($(this).scrollTop() >= 300) {
    $(".scroll_top").fadeIn(300);
    } else{
    $(".scroll_top").stop(true,true).fadeOut(100);
    }
    });
     
    </script>
    </body>
    </html>
     

    ---恢复内容结束---

  • 相关阅读:
    解决git推不上去1
    django中CBV源码分析
    Form和ModelForm组件
    jquery操作cookie
    django中的中间件
    django中ORM中锁和事务
    django_ajax
    docker安装jenkins 容器,集成python环境
    支付宝第三方支付
    redis基本使用
  • 原文地址:https://www.cnblogs.com/qiyc/p/5814157.html
Copyright © 2011-2022 走看看