点击回到顶部实现

做一个点击回到顶部的效果，因为是小白所以对于这个效果，具体的思路就是，判断浏览器的类型，然后获取window.scrollTop值，并且设置一个target值，通过定时器每次递减这个值，如果window.scrollTop为0则点击无效。具体代码：

<style type="text/css">
	#ts{
		width: 100%;
		height: 200px;
		border:1px solid #000;
		background: green;
	}
	#input{
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100px;
		height: 50px;
	}
</style>

	<div id="ts">111</div>
	<div id="ts">111</div>
	<div id="ts">111</div>
	<div id="ts">111</div>
	<div id="ts">111</div>
	<div id="ts">111</div>
	<input type="button" name="" value="点击我" id="input">
	
window.onload = function () {
      // 获取点击dom节点
		var Input = document.getElementById("input")
       // 点击触发事件调用
		Input.onclick = function () {
			scroll(20)
	    }
		// 每次递减滚动
		function scroll(targertop) {
			var top = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop;
			var timer = null
			// 判断获取的值是不是数字，并且是大于0才触发定时器
			if (!isNaN(top) && top > 0){
				timer = setInterval(function () {
					top -= targertop
					if (top<=0) {
						clearInterval(timer)
					}
					if (document.documentElement.scrollTop) {
						document.documentElement.scrollTop = top
					} else {
						document.body.scrollTop = top
					}
				},10)				
			}
		}
	}	

在测试了之后，页面是有效果的。