Question

我有三个div，比如

<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的ID

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

这样的东西？需要一些工作才能让它有点漂亮

＆＃13;

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

隐藏当前div并使用滚动操作显示隐藏的div

3 个答案: