javascript中全屏滑动效果实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        ul, ol {
            list-style: none;
        }

        html, body, ul, ul li {
            width: 100%;
            height: 100%;
        }

        ol {
            position: fixed;
            top: 50px;
            left: 50px;
        }

        ol li {
            width: 50px;
            height: 50px;
            border: 1px solid #000;
            text-align: center;
            line-height: 50px;
            cursor: pointer;
        }
    </style>
</head>
<body>
<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
</ul>
<ol>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
</ol>
<!--ol>li{$}*5-->
<script>
    var timer = null;
    //var leader = 0;
    //找人
    var ol = document.getElementsByTagName("ol")[0];
    var olLis = ol.children;
    var ul = document.getElementsByTagName("ul")[0];
    var ulLis = ul.children;

    var arr = ["red", "orange", "yellow", "green", "blue"];
    for (var i = 0; i < arr.length; i++) {
        olLis[i].style.backgroundColor = arr[i];
        ulLis[i].style.backgroundColor = arr[i];
    }

    /*window.onscroll = function () {
        leader = window.pageYOffset;//当前页面被卷去的头部
    };*/

    //给所有的olLis注册点击事件
    for (var j = 0; j < olLis.length; j++) {
        olLis[j].index = j;
        olLis[j].onclick = function () {
            //让窗体滚动到指定位置
            //就是要滚动到 要去的ul 的 offsetTop的值
            //当前点击的是ol中的哪个li 就去到ul中的那个li
            var target = ulLis[this.index].offsetTop;
            //window.scrollTo(0, target);
            //之前封装的缓动框架只能设置属性 而我们这里要的是一个渐渐变化的值
            clearInterval(timer);
            timer = setInterval(function () {
                //step = (target - leader) / 10
                //leader = leader + step
                var leader = window.pageYOffset;//当前页面被卷去的头部
                var step = (target - leader) / 10;
                step = step > 0 ? Math.ceil(step) : Math.floor(step);
                leader = leader + step;
                //console.log(leader);
                window.scrollTo(0, leader);
                if (leader === target) {
                    clearInterval(timer);
                }
            }, 20);
        };
    }
</script>
</body>
</html>