Question

我的页面中心有一个溢出的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

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

如何在点击overflow-y内的锚链接时阻止页面向下滚动？

1 个答案: