JavaScript/Jquery返回顶部代码

x7jntb93v9

于 2017-06-15 12:00:07 发布

阅读量273

点赞数

<!DOCTYPE html>
<html>
    <head>
        <title>返回顶部</title>
        <meta charset="utf-8" />
        <script type="text/javascript" src="jquery-1.8.2.js"></script>
        <style type="text/css">
            body{
                height:2000px;
            }
            #scrollTop{
                position:fixed;
                width:36px;
                height:65px;
                bottom:100px;
                right:100px;
                text-align:center;
                background:url("images/7.png");             
                color:#FFF;
                font-size:12px;
                cursor:pointer;
                display:none;
            }
            #scrollTop:hover{
                background-position:0px -66px;
            }
        </style>
    </head>
    <body>
        <div id="scrollTop"></div>  
 
        <script type="text/javascript">           
            $(window).scroll(function(){                            
                if($(window).scrollTop()<=100){
                    $("#scrollTop").fadeOut(1000);  
                }else{
                    $("#scrollTop").fadeIn(1000);
                }
            })
            $("#scrollTop").click(function(){
                 $('body,html').animate({scrollTop:0},500);
            })
        </script>
 
    </body>
</html>