zoukankan      html  css  js  c++  java
  • 快速回到顶部

    <!DOCTYPE html>

    <html lang="en">

     

    <head>

    <meta charset="utf-8">

    <title>Back to Top</title>

    <meta name="description" content="A simple page showing how to implement a back to top button">

    <meta name="author" content="Adi Purdila">

     

    <!-- Stylesheets -->

    <link rel="stylesheet" href="styles.css" />

     

    <!--[if lt IE 9]>

    <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>

    <![endif]-->

    </head>

    <body>

     

    <div class="container">

    <hgroup>

    <h1>快速回到顶部按钮</h1>

    <h3>~</h3>

    </hgroup>

     

    <hr />

     

    <section>

    <p>  文本占位符,内容

    ==========邪恶的分隔线==========

    </p>

    <p>

    嘿嘿,你发现了,上面的是占位的,哈哈,

    </p>

    </section>

     

    <footer>

    <hr />

     

    <p>Just some basic footer text.</p>

     

    <a href="#" class="go-top">Go Top</a>

    </footer>

    </div> <!-- end container -->

     

    <!-- JavaScript -->

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

    <script>

    $(document).ready(function() {

    // Show or hide the sticky footer button

    $(window).scroll(function() {

    if ($(this).scrollTop() > 200) {

    $('.go-top').fadeIn(200);

    } else {

    $('.go-top').fadeOut(200);

    }

    });

     

    // Animate the scroll to top

    $('.go-top').click(function(event) {

    event.preventDefault();

     

    $('html, body').animate({scrollTop: 0}, 300);

    })

    });

    </script>

    </body>

    </html>

  • 相关阅读:
    canvas 文本坐标(0,0)显示问题
    canvas 图片跨域处理
    canvas 文字换行
    什么是柯理化函数?
    记录一下学习webpack原理的过程
    pika和kombu实现rpc代码
    pika和rabbitMQ实现rpc代码
    docker部署rabbitMQ
    rabbitMQ和pika模块
    ubuntu搭建关于amd64或arm64,armhf架构的本地apt源
  • 原文地址:https://www.cnblogs.com/nik2011/p/3057195.html
Copyright © 2011-2022 走看看