在不移动页面视图的情况下显示隐藏的 div答案

【问题标题】：Displaying hidden divs without moving the view of the page在不移动页面视图的情况下显示隐藏的 div
【发布时间】：2017-02-03 20:16:10
【问题描述】：

我有一系列 div，用作演示页面。最初我只显示第一个 div，其他 2 个在页面加载时使用 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”）。

【问题讨论】：

您也可以发布您的html代码吗？顺便说一句，您淡出第 2 页，然后立即尝试显示它，这看起来没有必要......
所以你想让你的页面滚动到最底部？
我确实想要淡出效果，然后转到最后一个 div，但是显示是必要的，因为我想取消隐藏所有先前 div 的显示。 HTML 无关紧要，因为它可以是 div 中的任何内容。关键是要完成上面的事情。 @Pineda
基本上。但是当我取消隐藏以前的 div 时，我不想向下滚动到第三个 div，因为我希望显示始终保持在那里。 @JonasGiuro
请参阅：How to create a Minimal, Complete, and Verifiable example。为什么要淡入某些东西只是让它立即重新出现，这并不是很明显。我很惊讶淡出在调用 show page-2 行之前起作用......

标签： javascript jquery html

【解决方案1】：

问题是当你打开所有这些页面时，页面的高度会发生变化并且滚动条被抛在后面，要解决这个问题，你可以使用以下 sn-p 强制滚动条滚动到页面底部：

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

【讨论】：