JS实现滚动监听以及滑动到顶部

以前做滚动监听都是用jquery来实现这样的效果，虽然用jquery实现起来很方便，但是还是想用原生js来实现一下。

HTML代码：

<div class="uptop" id="uptop">
        <img src="images/up.png" id="to-top">//这里用了一个向上的箭头图片，用于表明返回顶部
</div>

CSS代码：

.uptop{
        position:fixed;//位置固定
        bottom:-50px;//距离底部-50px，为了使一开始不显示
        right:10px;//距离右边10px
        width:50px;
        z-index:99;//为了使此部分位于整个页面的最上部分，不会被覆盖
        -webkit-transition:all .5s;//设置改变bottom时的动画效果
        -moz-transition:all .5s;
        -ms-transition:all .5s;
        -o-transition:all .5s;
        transition:all .5s;
    }
    .uptop img{
        width:70%;
        cursor:pointer;
    }

JS代码：

window.onscroll = function(){ 
     var t = document.documentElement.scrollTop || document.body.scrollTop;  //获取距离页面顶部的距离
     var uptop = document.getElementById( "uptop" ); //获取div元素
     if( t >= 300 ) { //当距离顶部超过300px时
        uptop.style.bottom=30+'px';//使div距离底部30px，也就是向上出现
     } else { //如果距离顶部小于300px
        uptop.style.bottom=-50+'px';//使div向下隐藏
     } 
} 
var top=document.getElementById("to-top");//获取图片元素
var timer=null;
top.onclick = function(){ //点击图片时触发点击事件
        timer=setInterval(function(){ //设置一个计时器
        var ct = document.documentElement.scrollTop || document.body.scrollTop; //获取距离顶部的距离
        ct-=10;
        if(ct>0){//如果与顶部的距离大于零
             window.scrollTo(0,ct);//向上移动10px
        }
        else{//如果距离小于等于零
             window.scrollTo(0,0);//移动到顶部
             clearInterval(timer);//清除计时器
        }
    },10);//隔10ms执行一次前面的function，展现一种平滑滑动效果
}

通过这样一段js代码就能够实现当页面从顶部向下滑动超过300px时，返回顶部的图片出现，并且点击图片，页面平滑的移动到页面顶部。