全屏滾動封裝（PC端）

使用說明

函數調用 new FullScreenScroll(obj)
obj 參數說明：
{
outerTag: '大盒子標籤名（String）',
outerId: '大盒子id名（String）',
outerClass: '大盒子類名（String）',
tipTag: '側導航每層盒子標籤名（String）',
tipId: '側導航每層盒子id名（String）',
tipClass: '側導航每層盒子類名（String）'
}
Tag、Id、Class任選一個傳入

兼容性

兼容 Google、火狐、IE7及以上。
若是想兼容IE最好傳id或者標籤名 類名沒作處理 或者能夠本身再處理一下。

js代碼以下

function FullScreenScroll(obj){
    // 外層盒子
    if(obj.outerTag){
        this.ul = document.getElementsByTagName(obj.outerTag)[0];
    }else if(obj.outerId){
        this.ul = document.getElementById(obj.outerId);
    }else{
        this.ul = document.querySelector('.'+obj.outerClass);
    }
    // 內層每層盒子
    this.ulli = this.ul.children;
    // 側導航每層盒子
    if(obj.tipTag){
        this.ol = document.getElementsByTagName(obj.tipTag)[0];
    }else if(obj.tipId){
        this.ol = document.getElementById(obj.tipId);
    }else{
        this.ol = document.querySelector('.'+obj.tipClass);
    }
    this.olli = this.ol.children;
    // 定時器
    this.timer = null;
    // 控制滾動的開關 防止滑動過快
    this.flag = true;
    // 獲取捲去的高度 兼容寫法
    this.docTop = document.documentElement.scrollTop||document.body.scrollTop;
    // 規定盒子的初始位置的下標
    this.num = Math.round(this.docTop/this.ulli[0].offsetHeight);
    // 初始化元素信息
    this.eleInit()
    // 初始化函數
    this.init()
    var _this = this
    this.addEvent(window,'resize',function(){
        for(var i=0;i<_this.ulli.length;i++){
            _this.ulli[i].style.height = document.documentElement.clientHeight + 'px';
        }
    })
}
// 初始化元素信息
FullScreenScroll.prototype.eleInit = function(){
    this.ul.style.height = document.documentElement.clientHeight*this.ulli.length + 'px';
}
// 初始化函數 
FullScreenScroll.prototype.init = function(){
    // 給每一個側導航添加點擊事件
    for(var i=0;i<this.ulli.length;i++){
        var that = this;
        this.olli[i].index = i;
        this.ulli[i].style.height = document.documentElement.clientHeight + 'px';
           this.olli[i].onclick = function(){
               clearInterval(that.timer)
               // 動畫實現跳轉 15-24 起點、終點、步長
               // 終點
               var target = this.index*that.ulli[0].offsetHeight;
               that.num = this.index;
               that.move(target)
           }
       }
       // 滾動事件處理
       var _this = this;
       this.Mousewheel(this.ul,function(){
           // 向上滾動處理函數
        if(_this.flag){
            _this.flag = false;
            clearInterval(_this.timer)
            if(_this.num>0){
                _this.num--;
            }else{
                _this.num=0
            }
            var target = _this.num*_this.ulli[0].offsetHeight
            _this.move(target)
        }
    },function(){
        // 向下滾動處理函數
        if(_this.flag){
            _this.flag = false;
            clearInterval(_this.timer)
        if(_this.num<_this.ulli.length-1){
            _this.num++;
        }else{
            _this.num=_this.ulli.length-1;
        }
        var target = _this.num*_this.ulli[0].offsetHeight;
        _this.move(target)
        }
    })
}
// 每屏運動的函數 target 滾動結束位置
FullScreenScroll.prototype.move = function(target){
    var _this = this;
    this.timer = setInterval(function(){
        // 滾動起點
        // var leader = document.documentElement.scrollTop||document.body.scrollTop;
        var leader = _this.ul.offsetTop;
        // 步長 距離/n
        var step = (-target-leader)/10;
        // 當步長太小時 根據向上運動(step<0)或向下運動(step>0) 即 target-leader 大於0或小於0 向上取整或向下取整控制步長，不然步長一直減少，不會到達終點。
        step = step>0?Math.ceil(step):Math.floor(step);
        // 判斷是否到達終點
        // 會有 target-leader 不夠一個步長的狀況 這個時候會發生抖動
        if(Math.abs(-target-leader)<step){
            // 若是出現這種狀況 就直接讓它到 結束的位置 target
            _this.ul.style.top = -target + 'px';
            clearInterval(_this.timer)
        }else if(leader!=-target){
            // 若是沒有這種狀況 就正常的一步一步改變 leader 直到到達 結束位置
            leader+=step
            _this.ul.style.top = leader + 'px';
        }else if(leader==-target){
            _this.flag = true
            clearInterval(_this.timer)
        }
    },15)
}
// 滾輪事件 兼容寫法 obj 操做對象 upfn向上滾動執行函數 downfn向下滾動執行函數
FullScreenScroll.prototype.Mousewheel = function(obj,upfn,downfn){
    this.addEvent(obj,"mousewheel",wheel);
    this.addEvent(obj,"DOMMouseScroll",wheel);
    function wheel(e){
        var ev = window.event||e;
        var dir = -ev.detail||ev.wheelDelta
        // ev.detail firefox
        // ev.wheelDelta ie google
        if(ev.preventDefault){
            ev.preventDefault();
        }else{
            ev.returnValue = false;
        }
        if(dir>0){
            upfn();
        }else{
            downfn();
        }
    }
}
// 監聽事件兼容寫法 obj 操做對象 type 事件類型 fn 回調函數
FullScreenScroll.prototype.addEvent = function(obj,type,fn){
    if(document.addEventListener){
        obj.addEventListener(type,fn,false);
    }else{
        obj.attachEvent("on"+type,fn);
    }
}
// 調用
new FullScreenScroll({
    outerTag:'ul',
    tipTag:"ol"
})

HTML、CSS代碼

固然啦！ html和css就須要本身寫了。
這裏有一個簡單的醜陋的dome。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        div{
            width: 100%;
            height: 100%;
            overflow: hidden;
            position: relative;
        }

        ul, ol {
            list-style: none;
        }

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

        ul{
            width: 100%;
            font-size: 100px;
            text-align: center;
            line-height: 500px;
            position: absolute;
            top: 0;
            left: 0;
        }

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

        ol li {
            width: 50px;
            height: 50px;
            border: 1px solid #000;
            text-align: center;
            line-height: 50px;
        }
    </style>
</head>
<body>
    <div>
        <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>
    </div>
    
    <script>
        // 這裏寫上面封裝的函數
    </script>
</body>
</html>