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

Show / Hide elements - move to top of screen?

本文关键字：屏幕 顶部 移动 隐藏 元素 显示      更新时间：2023-09-26

我使用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显示问题。点击section 2，屏幕下方将展开。

理想情况下，我想让它向上滚动，这样section2就会在屏幕的顶部。

我把这个添加到elem.toggle();之后，它做了一些工作。

$('html, body').animate({
  scrollTop: elem.offset().top
}, 1000);
<<p>更新strong>小提琴

我遇到的问题是，滚动经常滚动到div的一部分，而不仅仅是顶部。

谁能告诉我如何让这个只滚动到当前div的顶部，而不是中途进入它。

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

点击Section 1，它会打开，向下滚动到Section 2，点击它

它将在DIV中打开一部分。

如何排序?

** following **

这似乎只是一个问题，如果我有时间在代码:

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

上面有问题。然而，下面的工作:

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

，但缺乏良好的过渡。有什么办法能让两者同时工作吗?

谢谢

根据您的描述，您更新的代码似乎可以工作，页面确实滚动到您选择的div的顶部。然而，如果你想让div的底部在页面底部，这样它就可以一直滚动，你可以找到div和窗口的高度，并从中计算出scrolltop的值，使用下面的代码:

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

小提琴

EDIT:发生这种情况是因为您计算出第二个div的偏移量，然后关闭第一个div，这会改变第二个div的位置。您可以通过等待第一个div关闭，然后再计算要滚动到的下一个偏移量来解决这个问题。

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

change

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


$('.slider').not(elem).slideUp(200);
elem.slideToggle(500);
相关文章：