zoukankan      html  css  js  c++  java
  • 返回顶部按钮功能的实现

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>toTop</title>
    <style type="text/css">
    *{
        margin:0;
        padding: 0;
    }
    html{
        height: 100%;
    }
    .toTopBtn{
        position: fixed;
        bottom: 100px;
        right: 100px;
        background: #333;
        color: #fff;
        padding: 5px 10px;
        cursor: pointer;
        display: none;
    }
    </style>
    </head>
    <body>
        <p>kkk</p><p>kkk</p><p>kkk</p><p>kkk</p><p>kkk</p><p>kkk</p><p>kkk</p><p>kkk</p><p>kkk</p><p>kkk</p><p>kkk</p><p>kkk</p><p>kkk</p><p>kkk</p><p>kkk</p><p>kkk</p><p>kkk</p><p>kkk</p><p>kkk</p><p>kkk</p><p>kkk</p><p>kkk</p><p>kkk</p><p>kkk</p><p>kkk</p><p>kkk</p><p>kkk</p><p>kkk</p><p>kkk</p><p>kkk</p><p>kkk</p><p>kkk</p><p>kkk</p><p>kkk</p><p>kkk</p><p>kkk</p><p>kkk</p><p>kkk</p><p>kkk</p><p>kkk</p><p>kkk</p><p>kkk</p><p>kkk</p><p>kkk</p><p>kkk</p><p>kkk</p><p>kkk</p><p>kkk</p><p>kkk</p><p>kkk</p><p>kkk</p><p>kkk</p><p>kkk</p><p>kkk</p><p>kkk</p><p>kkk</p><p>kkk</p><p>kkk</p><p>kkk</p><p>kkk</p><p>kkk</p><p>kkk</p><p>kkk</p><p>kkk</p><p>kkk</p><p>kkk</p><p>kkk</p><p>kkk</p><p>kkk</p><p>kkk</p><p>kkk</p><p>kkk</p><p>kkk</p><p>kkk</p><p>kkk</p><p>kkk</p><p>kkk</p><p>kkk</p><p>kkk</p><p>kkk</p><p>kkk</p><p>kkk</p><p>kkk</p><p>kkk</p><p>kkk</p><p>kkk</p><p>kkk</p><p>kkk</p><p>kkk</p><p>kkk</p><p>kkk</p><p>kkk</p><p>kkk</p><p>kkk</p><p>kkk</p><p>kkk</p><p>kkk</p><p>kkk</p><p>kkk</p><p>kkk</p><p>kkk</p><p>kkk</p><p>kkk</p><p>kkk</p><p>kkk</p><p>kkk</p><p>kkk</p><p>kkk</p><p>kkk</p><p>kkk</p><p>kkk</p><p>kkk</p><p>kkk</p><p>kkk</p><p>kkk</p><p>kkk</p><p>kkk</p><p>kkk</p><p>kkk</p><p>kkk</p><p>kkk</p>
    <script type="text/javascript" src="http://vscss.com/dm/jquery.js"></script>
    <script type="text/javascript">
    $(function(){
        var toTop = $("<span class='toTopBtn'>返回顶部</span>");
        $('body').append(toTop);
        $(window).scroll(function(event) {
            if($(window).scrollTop()>100){
                $('.toTopBtn').fadeIn();
            }else{
                $('.toTopBtn').fadeOut();
            }
        });
        $('.toTopBtn').click(function(){
            $('html,body').animate({
                scrollTop:0
            },200);
            //return false;
        });
    });
    </script>
    </body>
    </html>
  • 相关阅读:
    Mac上安装Git
    原型对象和原型链
    ES6入门
    一边宽度固定,一边宽度自适应
    15种css居中方式
    阿里CDN核心技术解密
    尽量用const,enum,inline代替define
    Nginx安装
    百度笔试题:malloc/free与new/delete的区别(转)
    C++内存管理(转)
  • 原文地址:https://www.cnblogs.com/vscss/p/5924363.html
Copyright © 2011-2022 走看看