Hide current div and show hidden div with scroll action

Question

I have three divs like

<div id="top" style="display:hide"></div>
<div id="middle" style="display:block"></div>
<div id="bottom" style="display:hide"></div>

They all are behave like pages and having similar height for example 700px. Initially only middle div (homepage) should be displayed. When I click on a link in middle div for example , middle div will be hidden and top div should be displayed and page should scroll that div. Similarly when another link in middle div , again middle div should be hidden and bottom div displayed and scrolling should be to the bottom this time.

I have used jquery scrollTo function but scrolling is happening after the div is displayed, not at the same time. I am using below code on link click

$('#top').css('display', 'block');
$('#top').ScrollTo();

Any help?

What is `display: hide`? Pretty sure you mean, `display: none;` — Ruddy, Dec 15 '14 at 10:25

score 0 · Answer 1 · answered Dec 15 '14 at 10:26

0

use

$('body').animate({scrollTop : $('#top').offset().top},'slow');

change #top with id for your div you want to scroll to it

answered Dec 15 '14 at 10:26

Mohamed-Yousef

23,946
3
19
28

Showing it and scrolling to it are not working as expected... how can i display the div and scroll to it at the same call? – vamsi Dec 15 '14 at 10:35
http://stackoverflow.com/questions/3432656/scroll-to-a-div-using-jquery and simply you can hide div using .hide() .. for example $('#top').hide(); – Mohamed-Yousef Dec 15 '14 at 10:40

score 0 · Answer 2 · answered Dec 15 '14 at 10:41

Demo

html

<div id="top" class="hide">
    <a href="#middle" data-target="#middle">middle page</a>
    <a href="#bottom" data-target="#bottom">bottom page</a>
</div>
<div id="middle">
    <a href="#top" data-target="#top">top page</a>
    <a href="#bottom" data-target="#bottom">bottom page</a> 
</div>
<div id="bottom" class="hide">
    <a href="#middle" data-target="#middle">middle page</a>
    <a href="#top" data-target="#top">top page</a> 
</div>

css

.hide {
    display:none;
}
#top, #middle, #bottom {
    height:300px;
}
#top {
    background:green
}
#bottom {
    background:blue
}
#middle {
    background:red;
}

jQuery

$("a").click(function () {
    $("div").addClass("hide");
    $($(this).data("target")).removeClass("hide");
})

There is scrolling take a good look. If only on div is visible at a time,how can to see scrolling? To see scroll you need to show all divs. — 4dgaurav, Dec 15 '14 at 11:06

score 0 · Answer 3 · answered Dec 15 '14 at 12:04

Something like this ? needs a bit of work to pretty it up a bit

$('a').on('click',function(e){
  $('div').hide();
  var href=$(this).attr('href');
  $(href).slideDown(2000,'swing');
  
  
  });

#top{height:300px;background-color:lime;display:none;}
#middle{height:300px;background-color:yellow;display:block;}
#bottom{height:300px;background-color:red;display:none;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="top" >
  <a href='#top'>Top</a>
  <a href="#middle">Middle</a>
  <a href="#bottom">Bottom</a>
 </div>
<div id="middle">
  <a href='#top'>Top</a>
  <a href="#middle">Middle</a>
  <a href="#bottom">Bottom</a>
 </div>
<div id="bottom" >
  <a href='#top'>Top</a>
  <a href="#middle">Middle</a>
  <a href="#bottom">Bottom</a>
</div>

Hide current div and show hidden div with scroll action

3 Answers3