在網頁中，點選按鈕就會跳轉到相應的位置，滑動頁面，左邊的列表顏色就會變化到相應的顏色,滾動條也會相應改變。
這個功能利用了jquery裡的scroll事件。先講點選列表，跳轉到相應的位置。在html5之前，我們可以在每塊的div中新增一個name，即錨點，然後html5之後，就移除了錨點的概念，因此，就可以利用id去實現，可以在每塊的位置新增一個item，比如item1,item2,item3……..,然後在左邊的裡邊中的li裡新增相應的連結，比如連結到id為item1的位置，就是a href=“#item1” 這樣，就可以實現點選左邊的列表，跳轉到相應的位置。
要做到實現拉動頁面時左邊列表背景色改變，就要用jquery ，用scroll()方法。要先獲取第一個div和視窗最上方的距離，然後遍歷item,然後判斷高度是否超過了item的高度，然後獲取到id名，接下來就是改變背景色，要先判斷當前id和連結是否等與左邊列表的當前id，如果不等於就相當於要改變顏色了，就要把之前的類名（即設定了背景名的css樣式，我設定的是current）刪除（removeClass）,然後在當前id中新增current類，這樣一個簡單的定位導航就實現了。

<ul>
            <li><a href="#item1" class="current">1F 男裝</a></li>
            <li><a href="#item2">2F 女裝</a></li>
            <li><a href="#item3">3F 美妝</a></li>
            <li><a href="#item4">4F 數碼</a></li
 
>
            <li><a href="#item5">5F 母嬰</a></li>

</ul>
/div><!--這是左邊列表的程式碼--

$(document).ready(function(){
//這是實現功能的jquery程式碼
/滾動條發生滾動/
(window).scroll(function(){  
            var top=(document).scrollTop();
var menu=(‘#menu’);  
            var items=

(‘#content’).find(‘.item’);
var currentId=”“;//當前所在樓層ID
items.each(function(){/遍歷/
var m=$(this);
var itemTop=m.offset().top;//offset返回匹配元素相對於文件的偏移（位置）
if(top>itemTop-200){
currentId=”#” + m.attr(‘id’);
}else{
return false;//跳出each
}
});
/給相應樓層新增current 取消其他的current/
var currentLink=menu.find(‘.current’);
if(currentId && currentLink.attr(‘href’)!=currentId){
currentLink.removeClass(‘current’);
menu.find(‘[href=”’+currentId+’”]’).addClass(‘current’);
}
//console.log(top);
});
});