如何实现同一个页面里面两个页面的相互切换（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"
}

}
})

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