显示/隐藏元素 - 移动到屏幕顶部？

Question

我用jquery来切换一些div的显示和隐藏。

但是当其中一个div扩展到屏幕之外时，出现问题。我想要做的是滚动页面，使该div位于屏幕顶部。

这是我正在使用的代码:

$('.slider').hide(800);
$('a#show').on('click', function (e) {
    e.preventDefault();
    var elem = $(this).next('.slider')
    $('.slider').not(elem).hide();
    elem.toggle();
});

我还创建了一个FIDDLE来展示问题，链接：http://jsfiddle.net/bMJ79/5/。点击第2个部分会使其超出屏幕底部。

理想情况下，我希望页面自动滚动，使第2个部分在屏幕顶部。

我在 elem.toggle(); 之后添加了以下代码，它有点起作用。

$('html, body').animate({
  scrollTop: elem.offset().top
}, 1000);

更新了 FIDDLE

我遇到的问题是滚动条通常只能将页面滚动部分地进入 div，而不是完全滚动到顶部。

请问有人可以告诉我如何使其仅滚动到当前 div 的顶部而不是部分进入其中？

** 更新 ** 更新了 FIDDLE，显示了部分滚动问题。

单击“第一部分”，它将打开，然后滚动到第二部分并单击它。

它会在 div 内部滚动部分内容。

我该如何解决这个问题？

** 跟进 **

如果代码中有时序控制，那么这似乎只是一个问题：

   $('.slider').not(elem).hide(600);
        elem.toggle(600);

上述代码存在问题，但以下代码可以正常运行：

   $('.slider').not(elem).hide();
        elem.toggle();

但是它缺乏良好的过渡效果。有没有办法让两者同时工作？谢谢。

- MacMan

---

按照你想要的方式对我有效。我如何复制“部分滚动进去”的效果？ - colburton

我不确定我是否理解了你的问题。这是你想要的吗：http://jsfiddle.net/bMJ79/7/ - techbech

@colburton - 原始帖子已更新，附上新的 fiddle 和如何复制问题的示例。谢谢 - MacMan

请查看我回答的新编辑以获取修复方法。如果您不喜欢我所放置的等待时间，可能有一种方法可以在第一个关闭之前计算出偏移量。 - Fergmux

Answer 1

根据您所描述的，您的更新代码看起来有效，页面会滚动到您选择的div的顶部。但是，如果您希望div的底部位于页面底部，以便滚动所有内容，可以找到div和窗口的高度，并使用以下代码计算出scrolltop值：

scrollTop: elem.offset().top + $(elem).height() - $(window).height()

FIDDLE

编辑: 这是由于您计算第二个div的偏移量，然后关闭第一个div导致第二个div位置发生变化。您可以通过等待第一个div关闭后再计算下一个要滚动到的偏移量来解决此问题。

setTimeout(function(){$('html, body').animate({
    scrollTop: elem.offset().top
}, 1000);}, 600);

NEW FIDDLE

- Fergmux

---

原始帖子已更新，附有新的fiddle和如何复制问题的示例。谢谢。 - MacMan

谢谢，这个方法可以用，但是会增加延迟。有没有什么解决办法？ - MacMan

很抱歉我不知道如何做到这一点，但是您需要计算出当所有其他元素关闭时div的偏移量，然后在其他元素被隐藏/显示时滚动到该值。 - Fergmux

谢谢你的帮助 - 我认为稍微调整一下时间，这个就可以工作了 :) - MacMan

Answer 2

变更

  $('.slider').not(elem).hide();
    elem.toggle();

使用

$('.slider').not(elem).slideUp(200);
elem.slideToggle(500);

- Alireza

---

原始帖子已更新，附有新的fiddle和复制问题的示例。谢谢。 - MacMan