Скрыть текущий DIV и показать скрытые DIV с действием прокрутки

Question

У меня есть три дивы, как

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

все они ведут себя, как страницы и имеющие одинаковую высоту, например 700px. Изначально должен отображаться только средний div (домашняя страница). Когда я нажимаю ссылку в среднем div, например, средний div будет скрыт, а верхний div должен отображаться, а страница должна прокручивать этот div. Аналогично, когда другая ссылка в среднем div, снова средний div должен быть скрыт, а нижний div отображается, а прокрутка на этот раз должна быть снизу.

Я использовал функцию jquery scrollTo, но прокрутка происходит после отображения div, но не в одно и то же время. Я использую код ниже по ссылке:

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

Любая помощь?

Answer 1

использование

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

изменение #top с идентификатором для вашего DIV вы хотите, чтобы перейти к нему

Answer 2

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"); 
}) 

Answer 3

Что-то вроде этого? нужно немного работы, довольно это немного

$('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>