今天寫的是整屏滾動的內容，最近奶糖飽受Vue的折磨，之前學習js的時候就沒認真學，知道這一個月的後臺學習下來我才知道js和jq是如此的可愛，好了閑話不扯進入今天的主體。

首先是我們的布局部分

//有了身體，我們還是得給他設置點樣式屬性，畢竟得有情懷

<style>

* {margin: 0; padding: 0;}
button {background: #3498db; color: #fff; font-size: 14px; text-align: center; width: 60px;    height: 60px; padding: 10px; border: none 0; cursor: pointer; position: fixed; right: 30px; bottom: 30px; display: none}
#wrap {    overflow: hidden; position: relative;}
#content {position: absolute; left: 0; top: 0; width: 100%;}
.colorBlock {height: 500px;    background: #c0dbff;}
#nav {position: fixed; left: 50%; margin-left: -70px; bottom: 30px;}
#nav a {background: #999; float: left; width: 10px; height: 10px; margin-left: 10px; cursor: pointer;}
#nav .now {    background: #3CF;}

</style>

//這裏是我們的body部分

<div id="wrap">
  <div id="content">
    <div class="colorBlock">第一屏</div>
    <div class="colorBlock" style="background:#c0faff">第二屏</div>
    <div class="colorBlock" style="background:#d6ffc0">第三屏</div>
    <div class="colorBlock" style="background:#ffcfe3">第四屏</div>
  </div>
</div>
<div id="nav"><a index="0" class="now"></a><a index="1"></a><a index="2"></a><a index="3"></a></div>
<script>
/* 要求：返回頂部按鈕開始是隱藏的，當頁面向上滾動超出600px的時候，顯示返回頂部按鈕 */
var GLOBLF = GLOBLE||{};   //這裏我們定義一個全局變量，用來存值

window.onload = function(){
　　resizeBlocks();

window.onresize = function(){
rsizeBlocks();
//調整頁面大小的時候讓整屏居中。

mainSlideGo();
if(mainSlideIndex){
　　　　if(GLOBLE.resizeTimer){
　　　　　　clearInterval(GLOBLE.resizeTimer);
}
GLOBLE.resizeTimr = setTimeout(function(){
　　　　mainSlideGoing = true;
　　　　mainSlideGo();
　　  },200)

　　}
 }
}//到這裏的話我們的自動調整頁面大小居中就OK啦
//現在我們需要鼠標點擊時候切換

var aAtags = document.getElementByTagName("a");
for(var i=0;i<aAtags.length;i++){
　　aAtags[i].onclick = function(){
　　　　mainSlideIndex = this.getAttribute("index");
　　　　　mainSlideGo();
}
}
//  單頁滾動開始
//鼠標滾動實踐綁定及檢測
var mainSlideIndex = 0;
var mainSlideGoing = false;
var mainSlideDelay = 0;
var mainSlideTimer = null;

var scrollFunc = function(e){
　　e = e || window .event;
　　　　if(e.wheelDelta){//判斷瀏覽器IE，谷歌滑輪　　　　　　if(e.wheelDelta>0){ //當滑輪向上滾動時候

　　　　　　　　console.log("滑輪向上啦！！")
　　　　　　　maiSlideUp();
}
　　　　if(e.wheelDelta<0){//滑輪向下滾動時
　　　　　　console.log（“滑輪向下了”）
　　　　　　　　maiSlideDown()
}
}　　else if(e.detail){//Firefox滑輪事件
　　　　if（e.detail>0）{//當滑輪向下滾動時
　　　　　　console.log（“滑輪向下了”）
　　　　　　　　mainSlideDown()
}
　　if(e.detail<0){//滑輪向上滾動
　　　　console.log（“向上滾動了”）
　　　　mainSlideUp
}　　

}

}
//現在我們給頁面綁定滑輪滾動事件
if(document.addEventListener){firefox
　　document.addEventListener("DOMMouseScroll",scrollFunc,false);
}
//滾動滑輪觸發scrollFunc方法 //IE 谷歌
window.onmousewheel = document.onmousewheel = scrollFunc;
//向下滾動
function mainSlideDown(){
　　if(mainSlideDelay<1){//這個判斷用於第一次檢測鼠標滾動，讓第二次鼠標滾動的時候在執行頁面動畫效果
　　　　　　clearInterval(mainSlideTimer);
　　　　　　　　mainSlideTimer = setTimeout(unction(){
　　　　　　　　　　mainSlideDelay++
},100)
　　　　
}else if(!mainSlideGoing){
　　mainSlideGoing　 = true;
　　mainSlideIndex++;
　　if(mainSlideIndex>3){
　　　　maindeIndex = 3;
}　
　　　　mainSlideGo();
}
}
//向上滾動
functuin mainSlideUp(){
　　if(mainSlideDelay<1){
　　　　clearInterval(mainSlideTimer);
　　　　mainSlideTimer = setTimeout(functin(){
　　　　　　mainSlideDelay++

},100)
}else if(!mainSlidGoing){
　　mainSlideGoing = true;
　　mainSlideIndex--;
　　if(mainSlideIndex<0){
　　　　maiSlideIndex = 0
}
　　mainSlideGo();
}
}

//滾動方法
function mainSlideGo(){
//用於設置滾動方向
var direction = 1;

var oDiv = document.getElementById("content");
var taget = document.getElementById("wrap").offstHeight*mainSlideIndex;
var distance = Math.abs(target + oDiv.offsetTop);
//判斷滾動方法，並設置相應的滾動方向是+還是-
　　if(target + oDiv.offsetTop <0){
　　　　direction = -1;
}
//設置滾動速度
var spead = distance/40;
var remainDis = distance;
//運動定時器
var goTimer = setInterval(function(){
oDiv.style.top = oDiv.offsetTop - spead*direction + "px";
remainDis -= spead;
　　if(remainDis<=40){
　　　　clearInterval(goTimer);
　　　　oDiv.style.top = -target +"px";
　　　　mainSlideGoing = false;
　　　　mainSlideDelay = 0;
　　　　document.getElementsByClassName("now")[0].className = "";
　　　　docment,getElementsByTagName("a")[mainSlideIndex].className = "now"
,},8)
 

    /*單頁滾動結束*/
   
   //調整頁面高度的方法
   function resizeBlocks(){
      var screenh = document.documentElement.clientHeight || document.body.clientHeight;
      
      aBlock = document.getElementsByClassName("colorBlock");

      for(var i=0; i<aBlock.length; i++){
         
         aBlock[i].style.height = screenh + "px";
      }
      document.getElementById("wrap").style.height = screenh + "px";
      
   }
   
}

</script>

整屏滾動的講解