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

本文主要是介绍用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;}

html 骨架：

<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>

javascript 结构：

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)}}
}

这篇关于用window.scrollTo实现有滚动条的全屏滚动的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---