用window.scrollTo实现有滚动条的全屏滚动

/* 用通配符清除默认样式减少代码量，实际项目应对用到的标签清除默认样式*/
*{margin:0;padding:0;list-style:none;}
html,body,#x1,.section{height:100%;width:100%;}
.fixedBar{position:fixed;top:50%;left:20px;width:30px;}
.fixedBar span{height:30px;border:1px solid #fff;margin-top:-1px;cursor:pointer;display:block;}

<div class="section section1"></div>
<div class="section section2"></div>
<div class="section section3"></div>
<div class="section section4"></div>
<div class="fixedBar">
<span></span>
<span></span>
<span></span>
<span></span>
</div>

window.onload = pageMove;
function pageMove () {
var colorArr = ['red','green','blue','yellow'];
var sections = getElementsByClassName('section');
var fixedBar = getElementsByClassName('fixedBar')[0];
var spans = fixedBar.getElementsByTagName('span');
fixedBar.style.cssText = 'margin-top:-' + 1/2*fixedBar.offsetHeight + 'px';
winScroll(sections,spans,colorArr);
}
/*备用函数*/
function getElementsByClassName(classname) {
if(document.getElementsByClassName) {
return document.getElementsByClassName(classname);
}
var eleArr = document.getElementsByTagName('*');
var classArr = [];
for(var i = 0; i < eleArr.length; i ++) {
var classnameArr = eleArr[i].className.split(' ');
for(var j = 0; j < classnameArr.length; j ++) {
if(classnameArr[j] == classname) {
classArr.push(eleArr[i]);
}
}
}
return classArr;
}
function winScroll(arr1,arr2,arr3) {
var timer = null,leader = 0;
clearInterval(timer);
for(var i= 0; i<arr1.length; i++) {
arr1[i].style.backgroundColor = arr3[i];
arr2[i].style.backgroundColor = arr3[i];
arr2[i].index = i;
arr2[i].onclick = function() {
clearInterval(timer);
target = arr1[this.index].offsetTop;
timer = setInterval(function() {
var  step =  (target - leader) / 30;
step =  step > 0 ? Math.ceil(step) : Math.floor(step);
leader = leader + step;
if(leader == target ) {
clearInterval(timer);
}
window.scrollTo(0, leader);
},10)
}
}
}