单击溢出-y内的锚链接时，如何防止页面向下滚动？

Question

我的页面中心有一个y溢出div。 我创建了一些锚点链接按钮，这些按钮将滚动到overflow-y div中的某个区域。 我的问题是，当单击一个按钮时，整个页面将滚动到我页面中心的那个div的顶部。 我只希望溢出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

您可以计算锚点偏移量，然后将overflow-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/