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

最新推荐文章于 2024-06-29 11:03:00 发布

原创最新推荐文章于 2024-06-29 11:03:00 发布 · 1.3k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#JavaScript 基本小效果的实现

Webpage Effects 专栏收录该内容

18 篇文章

订阅专栏

本文介绍了网页中通过JavaScript实现动态效果与布局调整的技术，包括HTML骨架构建、CSS样式应用及响应式设计策略。

基础样式：

/* 用通配符清除默认样式减少代码量，实际项目应对用到的标签清除默认样式*/ 
*{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)
        }
    }
}