混动效果没有出来

看了一下代码没有出错啊，不知道为什么没有混动效果。而且我混动的那个图片定义样式只能在html里面设置才出来，放到css里面调用就没有出来，感觉好奇怪。求解啊！

代码如下：<!doctype html/>
<html>
<head>
<meta charset="utf-8"/>
<link rel="stylesheet" type="text/css" href="css/srcoll-to-top.css"/>
<script type="text/javasript" src="jQuery/scroll-to-top.js"></script>
<title>javascript实现回到顶部</title>

<style type="text/css">

    #btn{
   width:40px;
   height:40px;
   position:fixed;
   left:50%;
   margin-left:600px;
   bottom:30px;
   background:url(images/top_bg.png)no-repeat left top;
    }
    #btn:hover{
   background:url(images/top_bg.png)no-repeat left -40px;
    }

   </style>

</head>
<body>

<a href="javascript:;" id="btn" title="回到顶部"></a>


<div class="box">
<img src="images/tb_bg.jpg" alt="" />
</div>

</body>
</html>

scroll-to-top.js

/*页面加载完毕后触发*/
window.onload=function(){
   var obtn=document.getElementById('btn') ; /*获取id*/
   var time = null;
   obtn.onclick=function(){       /*绑定事件*/
        timer = setInterval(function(){    /*设置定时器*/
           var osTop =   document.documentElement.scrollTop || document.body.scrollTop; /*获取混动条距离顶部的高度，还有判断选择，解决浏览器兼容性问题。*/
       document.documentElement.scrollTop = cocument.body.scrollTop -= 50; /*页面每次往上走的距离*/
       },30);

   }

}