javascript - 在不移动页面 View 的情况下显示隐藏的div

Question

我有一系列的 div，用作演示页面。最初我只显示第一个 div，在页面加载时使用 jQuery hide() 隐藏其他 2 个 div。每个 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();


});

 }); 

此代码将 View 返回到第一个 div (“.page-1”)。

Answer 1

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

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