具體描述：
當前頁面兩個滾動條，一個是頁面滾動條，一個是DIV存放錨點的滾動條。需求是，滾動頁面滾動條時，DIV滾動條隨著頁面滾動條滾動？
意思是指，比如，右側(cè)錨點位置在#5，DIV里的錨點鏈接也是在#5這個對應(yīng)的錨點上，并且獲取出當前這個錨點鏈接距離這個存放錨點鏈接的DIV頂部多少距離使其一直處于（滾動于）這個DIV的第二個位置上。
如圖所示：
請問該如何實現(xiàn)，先謝謝啦！~
監(jiān)聽頁面的滾動事件，然后計算，設(shè)置div的滾動高度
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
#toc{
height: 250px;
width: 200px;
border:1px solid #ddd;
overflow: auto;
position: fixed;
left: 50px;
top: 50%;
margin-top: -125px;
}
#toc li{
height: 30px;
margin: 10px 0px;
width: 100%;
padding-left: 20px;
}
.article-content{
margin-left: 350px;
}
.article-content article{
height: 800px;
border: 1px solid #ddd;
margin: 10px 0;
}
li.active{
position: absolute;
top: 40px;
background-color: #f2f5f2;
color: red;
}
h6.active{
color: red;
}
ol{
padding: 0px;
}
</style>
</head>
<body>
<div id="toc" class="toc-article fixed height-255 overflow-auto">
<ol class="toc">
<li class="toc-item toc-level-6">
<a class="toc-link" data-id="1" href='###'>
<span class="toc-number">1.</span> <span class="toc-text">錨點鏈接1</span>
</a>
</li>
<li class="toc-item toc-level-6">
<a class="toc-link" data-id="2" href='###'>
<span class="toc-number">2.</span> <span class="toc-text">錨點鏈接2</span>
</a>
</li>
<li class="toc-item toc-level-6">
<a class="toc-link" data-id="3" href='###'>
<span class="toc-number">3.</span> <span class="toc-text">錨點鏈接3</span>
</a>
</li>
<li class="toc-item toc-level-6">
<a class="toc-link" data-id="4" href='###'>
<span class="toc-number">4.</span> <span class="toc-text">錨點鏈接4</span>
</a>
</li>
<li class="toc-item toc-level-6">
<a class="toc-link" data-id="5" href='###'>
<span class="toc-number">5.</span> <span class="toc-text">錨點鏈接5</span>
</a>
</li>
<li class="toc-item toc-level-6">
<a class="toc-link" data-id="6" href='###'>
<span class="toc-number">6.</span> <span class="toc-text">錨點鏈接6</span>
</a>
</li>
<li class="toc-item toc-level-6">
<a class="toc-link" data-id="7" href='###'>
<span class="toc-number">7.</span> <span class="toc-text">錨點鏈接7</span>
</a>
</li>
<li class="toc-item toc-level-6">
<a class="toc-link" data-id="8" href='###'>
<span class="toc-number">8.</span> <span class="toc-text">錨點鏈接8</span>
</a>
</li>
<li class="toc-item toc-level-6">
<a class="toc-link" data-id="9" href='###'>
<span class="toc-number">9.</span> <span class="toc-text">錨點鏈接9</span>
</a>
</li>
<li class="toc-item toc-level-6">
<a class="toc-link" data-id="10" href='###'>
<span class="toc-number">10.</span> <span class="toc-text">錨點鏈接10</span>
</a>
</li>
<li class="toc-item toc-level-6">
<a class="toc-link" data-id="11" href='###'>
<span class="toc-number">11.</span> <span class="toc-text">錨點鏈接11</span>
</a>
</li>
<li class="toc-item toc-level-6">
<a class="toc-link" data-id="12" href='###'>
<span class="toc-number">12.</span> <span class="toc-text">錨點鏈接12</span>
</a>
</li>
</ol>
</div>
<div class="article-content">
<article>
<h6 id="1">錨點標題位置1</h6>
<p>內(nèi)容1</p>
</article>
<article>
<h6 id="2">錨點標題位置2</h6>
<p>內(nèi)容2</p>
</article>
<article>
<h6 id="3">錨點標題位置3</h6>
<p>內(nèi)容3</p>
</article>
<article>
<h6 id="4">錨點標題位置4</h6>
<p>內(nèi)容4</p>
</article>
<article>
<h6 id="5">錨點標題位置5</h6>
<p>內(nèi)容5</p>
</article>
<article>
<h6 id="6">錨點標題位置6</h6>
<p>內(nèi)容6</p>
</article>
<article>
<h6 id="7">錨點標題位置7</h6>
<p>內(nèi)容7</p>
</article>
<article>
<h6 id="8">錨點標題位置8</h6>
<p>內(nèi)容8</p>
</article>
<article>
<h6 id="9">錨點標題位置9</h6>
<p>內(nèi)容9</p>
</article>
<article>
<h6 id="10">錨點標題位置10</h6>
<p>內(nèi)容10</p>
</article>
<article>
<h6 id="11">錨點標題位置11</h6>
<p>內(nèi)容11</p>
</article>
<article>
<h6 id="12">錨點標題位置12</h6>
<p>內(nèi)容12</p>
</article>
</div>
</body>
<script src="js/jquery-1.11.3.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(document).ready(function (){
elevator.init();
debugger;
$('#toc').on('click','.toc-link',function(e){
$(this).parent('li').addClass('active').siblings().removeClass('active');
$('#toc').scrollTop(0);
var elemTop=getElementTop($('#'+$(this).attr('data-id')).parent()[0]);
window.scrollTo(0,elemTop-elevator.UPLEVEL);
});
});
function getElementTop(elem){
var elemTop=elem.offsetTop;
elem=elem.offsetParent;
while(elem!=null){
elemTop+=elem.offsetTop;
elem=elem.offsetParent;
}
return elemTop;
}
var elevator={
FLOORHEIGHT:0,
UPLEVEL:0,
DOWNLEVEL:0,
init:function(){
var style=getComputedStyle($('article')[0]);
this.FLOORHEIGHT=
parseFloat(style.height)+parseFloat(style.marginBottom)
this.UPLEVEL=(innerHeight-this.FLOORHEIGHT)/2;
this.DOWNLEVEL=this.UPLEVEL+this.FLOORHEIGHT;
window.addEventListener('scroll',this.scroll.bind(this));
},
scroll:function(){//在頁面滾動時觸發(fā)檢測
debugger
var h=$('article h6');
for(var i=0;i<h.length;i++){
var elemTop=getElementTop(h[i]);
var scrollTop=document.body.scrollTop||document.documentElement.scrollTop;
if(scrollTop>elemTop-this.UPLEVEL){
h[i].className="";
}else if(scrollTop>elemTop-this.DOWNLEVEL){
$(h[i]).addClass('active');
debugger;
$('a[data-id="'+($(h[i]).attr('id'))+'"').parent().addClass('active').siblings().removeClass('active');
}else{
h[i].className="";
}
}
},
}
</script>
</html>
//這個是以前做的一個項目用到的代碼，在這個基礎(chǔ)上改的，所以有原生的，有jquery的。你試一下效果。
北大青鳥APTECH成立于1999年。依托北京大學優(yōu)質(zhì)雄厚的教育資源和背景，秉承“教育改變生活”的發(fā)展理念，致力于培養(yǎng)中國IT技能型緊缺人才，是大數(shù)據(jù)專業(yè)的國家
北大青鳥中博軟件學院創(chuàng)立于2003年，作為華東區(qū)著名互聯(lián)網(wǎng)學院和江蘇省首批服務(wù)外包人才培訓基地，中博成功培育了近30000名軟件工程師走向高薪崗位，合作企業(yè)超4
中公教育集團創(chuàng)建于1999年，經(jīng)過二十年潛心發(fā)展，已由一家北大畢業(yè)生自主創(chuàng)業(yè)的信息技術(shù)與教育服務(wù)機構(gòu)，發(fā)展為教育服務(wù)業(yè)的綜合性企業(yè)集團，成為集合面授教學培訓、網(wǎng)
達內(nèi)教育集團成立于2002年，是一家由留學海歸創(chuàng)辦的高端職業(yè)教育培訓機構(gòu)，是中國一站式人才培養(yǎng)平臺、一站式人才輸送平臺。2014年4月3日在美國成功上市，融資1
曾工作于聯(lián)想擔任系統(tǒng)開發(fā)工程師，曾在博彥科技股份有限公司擔任項目經(jīng)理從事移動互聯(lián)網(wǎng)管理及研發(fā)工作，曾創(chuàng)辦藍懿科技有限責任公司從事總經(jīng)理職務(wù)負責iOS教學及管理工作。
浪潮集團項目經(jīng)理。精通Java與.NET 技術(shù)， 熟練的跨平臺面向?qū)ο箝_發(fā)經(jīng)驗，技術(shù)功底深厚。 授課風格 授課風格清新自然、條理清晰、主次分明、重點難點突出、引人入勝。
精通HTML5和CSS3；Javascript及主流js庫，具有快速界面開發(fā)的能力，對瀏覽器兼容性、前端性能優(yōu)化等有深入理解。精通網(wǎng)頁制作和網(wǎng)頁游戲開發(fā)。
具有10 年的Java 企業(yè)應(yīng)用開發(fā)經(jīng)驗。曾經(jīng)歷任德國Software AG 技術(shù)顧問，美國Dachieve 系統(tǒng)架構(gòu)師，美國AngelEngineers Inc. 系統(tǒng)架構(gòu)師。
掃碼關(guān)注鍍金池微信號
手機訂課，優(yōu)惠多多