如何实现同一个页面里面两个页面的相互切换（window.onscroll）

---

这里我们通过一个实例来阐述具体的做法，首先我们在一个页面有两个要处理的DIV页面，第一个页面的div中id=”basic”，第二个页面的div中id=”high”。（我们要实现的功能是，点击基础入门，与 高级技能 可以切换对应的页面，基础入门 下滑 就是 高级技能页面，高级技能页面上滑就是 基础入门页面）

---

HTML

     <div class="nav"></div>
        <div id="basic" class="basicintro">
          ..... // 页面一
        </div>

        <div id="high" class="highskill">
          .....// 页面二
     </div>

接下来我们引入zepto-cmd.js（JQuery.js的精简版） 或者JQuery.js ,上面是Sea.js引入的写法，常规写法

    <script type="text/javascript" src="jquery-1.12.2.min.js"></script>

接下来就在页面加载后，或者文档元素加载后执行下面的匿名函数。

JS

var $ =window._$=require("/lib_cmd/zepto-cmd")
    //页面滚动的时候
     $(function(){
            /* scrollTo(0,0);*/
             window.onscroll=function(){      //页面滚动的时候
                 var elm1=$("#basic")[0];
                 var elm2=$("#high")[0];
                 var scrolltop = Math.ceil(document.documentElement.scrollTop ||document.body.scrollTop);
                 if (scrolltop >= 0 && scrolltop < elm2.offsetTop-$(".nav").height()) {
                     $(".nav ul li a").removeClass("on"); //内部去除锚，和底部CSS样式处理
                     $(".basic a").addClass("on");   //内部添加锚，和底部CSS样式处理
                     //location.hash="#basic";
                 }
                 if (scrolltop >= elm2.offsetTop-$(".nav").height()) {
                     $(".nav ul li a").removeClass("on");
                     $(".high a").addClass("on");
                    // location.hash="#high";
                 }
             }
        })

我们通过$("#basic")[0] 和$(“#high”)[0] 拿到对应的DIV对象，通过

    Math.ceil(document.documentElement.scrollTop 

拿到滚动条的高度，如果

    scrolltop >= 0 && scrolltop < elm2.offsetTop-$(".nav").height()，

也就是说但滚动条的高度大于0，并且其高度小于$(“#high”)[0]的高度减去 页面最上面

    <div class="nav"></div> 

的高度时，第一个页面添加对应的样式，第二个页面去除对应的样式。同理当，并且其高度大于$(“#high”)[0]的高度减去 页面最上面

    <div class="nav"></div> 

的高度时，第一个页面去除对应的样式，第二个页面加上对应的样式。

这样看似逻辑正确？其实在手机上回出现一个小问题，就是页面在刷新的时候，页面跳不到对应的位置！因此我们做了这样的操作。

var $ =window._$=require("/lib_cmd/zepto-cmd")
        //页面滚动的时候
         $(function(){
                /* scrollTo(0,0);*/
                 window.onscroll=function(){      //页面滚动的时候
                     var elm1=$("#basic")[0];
                     var elm2=$("#high")[0];
                     var scrolltop = Math.ceil(document.documentElement.scrollTop ||document.body.scrollTop);
                     if (scrolltop >= 0 && scrolltop < elm2.offsetTop-$(".nav").height()) {
                         $(".nav ul li a").removeClass("on");
                         $(".basic a").addClass("on");
                         //location.hash="#basic";
                     }
                     if (scrolltop >= elm2.offsetTop-$(".nav").height()) {
                         $(".nav ul li a").removeClass("on");//内部去除锚，和底部CSS样式处理
                         $(".high a").addClass("on"); //内部添加锚，和底部CSS样式处理
                        // location.hash="#high";
                     }
                 }
                 window.onload=function (){      //页面加载的时候
                     if (window.location.hash=="#basic") {
                         window.location.hash = "";
                         window.location.hash="basic"
                     }else if(window.location.hash=="#high"){
                         window.location.hash = "";
                         window.location.hash="high"
                     }else{
                         window.location.hash = "";
                         window.location.hash="#basic"
                     }

                 }
            })

我们在页面加载前，对页面当前的锚，做判断，具体做法如上所示。这样就有效的避免页面了在加载，刷新时的问题。