隐藏元素后更新滚动条

Question

我有一个网页，其中包含部分。每个部分也有 100% 的宽度和高度。我的第 1 部分位于网页顶部。第 2 节低于第 1 节，依此类推。例如，我的视图在 Section2 上，我想隐藏 Section1。隐藏 Section1 后，Section2 位于顶部。但浏览器会记住，它位于 Section1 下方，并向下滚动一个部分到 Section3。那么我应该如何避免这种滚动呢？

    <section id="1">

    </section>
    <section id="2">

    </section>
    <section id="3">

    </section>

    <script type="text/javascript">
        <!--the view is on section2-->
        $('#1').addClass('hidden');
    </script>

Answer 1

让我们从澄清开始：

浏览器记住，它在 Section1 下方并滚动一个 第 3 节。

浏览器不记得也不滚动任何内容。浏览器滚动了 x 像素，删除第一部分后仍然滚动 x 像素，但是第 2 部分占用的空间现在被第 3 部分占用了。

您需要做的是将垂直滚动固定到删除 div #1 后应该在的位置。由于它们占据了 100% 的高度，它会滚动一个负值 window.height：

$(window).scrollTop( $(window).scrollTop() - $(window).height() );

或者，如果您想将其滚动到 #2 部分的开头，那么您必须这样做：

$(window).scrollTop( $("#2").offset().top );

你可以看到它在这个 jsfiddle 上工作：http://jsfiddle.net/7wegxuyu/4/（它包含两个例子，一个被注释，你需要取消注释才能看到它工作）