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>
  • 相关阅读:
    CentOS 6.3 从0开始配置防火墙规则
    ppt删除所有墨迹注释
    生日、毕业与大学的回忆
    20171201-构建之法:现代软件工程-阅读笔记
    软件工程课程总结
    课后作业-阅读任务-阅读提问-4
    Forward团队-爬虫豆瓣top250项目-项目总结
    Forward团队-爬虫豆瓣top250项目-最终程序
    课后作业-阅读任务-阅读提问-3
    20171117-构建之法:现代软件工程-阅读笔记
  • 原文地址:https://www.cnblogs.com/vscss/p/5924363.html
Copyright © 2011-2022 走看看