用jquery做的，实现不了请老师看看哪里出问题

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <title>Javascript 回到顶部效果</title>
<style>
*{margin:0;padding:0;}
.box {
    width:1190px;     
     margin:0 auto;
    }
    #btn {
    width:40px;
    height:40px;
    position: fixed;
    left:50%; 
    margin-left:610px;
    bottom:30px; 
    background:url(http://img1.sycdn.imooc.com//535e0dc100010e9c00400080.jpg) no-repeat left top;
    }
   #btn:hover {
    background:url(http://img1.sycdn.imooc.com//535e0dc100010e9c00400080.jpg) no-repeat 0 -40px;
    }
     

    </style>
</head>
<body>

<div>
<img src="http://img1.sycdn.imooc.com//535e0ce800015b7511902787.jpg" />
</div>
<a href="javascript:;" id="btn" title="回到顶部"></a>
<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
<script>
    $(function(){
     $("#btn").hide();
   var top=document.documentElement.srcollTop || document.body.srcollTop;
       if (top>=100) {$("#btn").show();} else{$("#btn").hide();}
$("#btn").click(function(){
$("html,body").animate({scrollTop:0},300);
});
    })
</script>
</body>
</html>