CODEWITHSUNDEEP
javascriptjqueryhtml
victoria
victoria

Reputation: 207

Displaying hidden divs without moving the view of the page

I have a series of divs, that serve as a demo page. Initially I have only the first div showing, with the other 2 hidden using jQuery hide() on page load. There is a button on each div which triggers a jQuery event of hiding the current div and showing the next div in the sequence.

I would like on the very last div (div 3), once displayed to also show the previous 2 divs, but to have div 3 still display. Meaning, the user can scroll up to see the other two divs, but without scrolling they will still be viewing 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();


});

 });

This code brings the view back up to the first div (".page-1").

Upvotes: 1

Views: 294

Answers (1)

Jonas Grumann
Jonas Grumann

Reputation: 10786

The problem is that when you have all of them open the height of the page changes and the scrollbar gets left behind, to fix this you can force the scrollbar to scroll to the bottom of the page with the following snippet:

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

Upvotes: 1

Related Questions