显示隐藏的div而不移动页面的视图

Question

我有一系列的div，作为一个演示页面。最初，我只显示了第一个div，其他两个则使用jQuery hide()隐藏在页面加载中。每个div上都有一个按钮，它触发一个隐藏当前div并在序列中显示下一个div的jQuery事件。

我想在最后一个div (div 3)，一旦显示也显示前2个div，但有div 3仍然显示。也就是说，用户可以向上滚动以查看其他两个div，但是没有滚动，他们仍然可以查看div 3。

$(document).ready(function () {
    $(".page-2").hide();
    $(".page-3").hide();
    $(".overlay").show();

$(".overlay-button").click(function () {
    $(".overlay").hide();
    $(".page-1").fadeOut(1000);
    $(".page-2").show("slow");

});

$(".arrow-down").click(function () {
    $(".page-2").fadeOut(1000);
    $(".page-3").show();
    $(".page-2").show();
    $(".page-1").show();


});

 }); 

这段代码将视图带回到第一个div (“..page 1”)。

Answer 1

问题是，当您打开所有这些选项时，页面的高度发生变化，滚动条被抛在后面，要解决这个问题，可以强制滚动条滚动到页面底部，并使用以下代码片段：

$('html, body').scrollTop($(document).height());