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>
  • 相关阅读:
    java数据库访问类和接口
    数据删除的用法
    短信发送(M800)
    Spring注解开发(六)扩展原理
    观察者模式(Obeserver Pattern)
    Spring注解开发(五)声明式事务
    Spring注解开发(四)AOP原理与源码分析
    Spring注解开发(三)属性赋值与自动装配
    Spring注解开发(二)生命周期
    Spring注解开发(一)组件注册
  • 原文地址:https://www.cnblogs.com/vscss/p/5924363.html
Copyright © 2011-2022 走看看