Question

请参阅JSFiddle。基本上，我有3个很长的div。在第二个div的末尾，我有一个按钮，点击后，删除第一个div。问题是删除此div使页面滚动到最后。当发生这种情况时，如何防止此行为并保持视口完整？

<div id="first">
    <p>Some really long content ...</p>
</div>
<div id="second">
    <p>Some really long content... </p>
</div>
<button onclick="$('#first').remove()">Remove First div</button>
<div id="third">
    <p>Some really long content ...</p>
</div>

Answer 1

您需要解释的行为。要保持当前位置，您需要调整视口滚动的位置。例如，在您的jsfiddle中更新：http://jsfiddle.net/d0fqts8p/1/

$('button').click(function () {
    var firstElHeight = $('#first').height();  // get the height of element to be deleted
    var currentHeight = $("body").scrollTop(); // get the current scroll position
    $('#first').remove();
    $("body").scrollTop( currentHeight - firstElHeight);  //calculate and set back
});

删除div时如何保留当前视口？

1 个答案: