为什么这两组基本一样的代码，为什么运行却是不一样的？

Question

<script type="text/javascript">
 var top1 = document.getElementById('top');
 var con1 = document.getElementById('con1');
 var con2 = document.getElementById('con2');
 var time = 50;
 top1.scrollTop = 0;
 con2.innerHTML = con1.innerHTML;
 function start(){
    if(top1.scrollTop >= con1.scrollHeight){
        top1.scrollTop = 0;
        }else{
        top1.scrollTop ++;    
            }
    }
var iTime = setInterval("start()",time);
top1.onmouseover = function(){
    clearInterval(iTime);
    }
top1.onmouseout = function(){
    iTime = setInterval("start()",time);
    }
</script>

上面这段代码能实现滚动。

下面的代码几乎一样的，就是var top = document.getElementById('top');不同。

下面这段代码不能实现滚动，没有反应

这到底有什么不同吗？就是变量名称不同

其他HTML ，CSS都一样的；

为什么这条语句会无效？

var top = document.getElementById('top');

最后反复实验了，当var top = document.getElementById('top');
的时候，不能实现滚动，这是为什么呢

<script type="text/javascript">
 var top = document.getElementById('top');
 var con1 = document.getElementById('con1');
 var con2 = document.getElementById('con2');
 var time = 50;
 top.scrollTop = 0;
 con2.innerHTML = con1.innerHTML;
 function start(){
    if(top.scrollTop >= con1.scrollHeight){
        top.scrollTop = 0;
        }else{
        top.scrollTop ++;    
            }
    }
var iTime = setInterval("start()",time);
top.onmouseover = function(){
    clearInterval(iTime);
    }
top.onmouseout = function(){
    iTime = setInterval("start()",time);
    }
</script>