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>
     

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

  • 相关阅读:
    摆花
    关于我的博客
    博客美化更新日志
    页面美化代码1.x
    本人已转至新博客!
    回归博客园
    退役快乐
    Luogu神贴合辑
    代码高亮预览
    NOIp2018普及组初赛解题报告
  • 原文地址:https://www.cnblogs.com/qiyc/p/5814157.html
Copyright © 2011-2022 走看看