---

這里我們通過一個實例來闡述具體的做法，首先我們在一個頁面有兩個要處理的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"}}})

我們在頁面加載前，對頁面當前的錨，做判斷，具體做法如上所示。這樣就有效的避免頁面了在加載，刷新時的問題。

總結

以上是生活随笔為你收集整理的如何实现同一个页面里面两个页面的相互切换（window.onscroll）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。