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>
  • 相关阅读:
    Liferay安装maven
    html之pre标签
    a标签使用注意事项
    AngularJS学习记录
    页面不能访问,抛出 spring java.lang.IllegalArgumentException: Name for argument type [java.lang.String] 异常
    ant编译的时候,报错文件不存在,以及版本不一致
    Eclipse 更改Java 版本的方法
    总结一下本次准备环境时遇到的问题,以供下次参考
    数据上下文中的AddOrUpdate方法
    推荐一款github管理神器SourceTree
  • 原文地址:https://www.cnblogs.com/vscss/p/5924363.html
Copyright © 2011-2022 走看看