當overflow-y中的錨點鏈接被點擊時，toprevent頁面如何向下滾動？

Question

我有一個溢出-y div在我的頁面的中心。我創建了一些錨鏈接按鈕，它們將滾動到overflow-y div中的某個區域。我的問題是，當點擊一個按鈕時，整個頁面會滾動到頁面中心的div頂部。我只想讓我的overflow-y div的內容向下滾動而不滾動整個頁面。

這裏是一個小提琴 http://jsfiddle.net/badsyntax87/eprsnayf/28/

<div class="pageWrapper"> 
<div class="wrapper"> 
    <div id="serverNav"> 
     <a class="button" href="#server1">svr1</a> 
     <a class="button" href="#server2">svr2</a> 
     <a class="button" href="#server3">svr3</a> 
     <a class="button" href="#server4">svr4</a> 
     <a class="button" href="#server5">svr5</a> 
    </div> 
    <div id="servers"> 
     <div id="server1"> 
      1 
     </div> 
     <div id="server2"> 
      2 
     </div> 
     <div id="server3"> 
      3 
     </div> 
     <div id="server4"> 
      4 
     </div> 
     <div id="server5"> 
      5 
     </div> 
    </div> 
</div> 

Answer 1

可以計算錨偏移量，然後溢出-Y div的scrollTop屬性設置爲該值。

function scrollToAnchor(elementId) { 
    var wrapper = document.getElementById("wrapper"); 
    var anchor = document.getElementById(elementId); 
    wrapper.scrollTop = anchor.offsetTop - wrapper.offsetTop; 
} 

http://jsfiddle.net/yruac1pa/