Question

我有一系列新闻项目（确切地说是警报和公告），每个都单独包装在他们自己的<div>标签内，设置为隐藏除页面加载标题之外的所有内容。单击任何标题（h2），单个项目的详细信息显示（slideDown），以及任何其他打开的项目折叠（slideUp）。因此，一次只能查看一个新闻项目。一切都好。

当窗口宽度为平板电脑尺寸或更小（767px）时，我的代码也设置为scrollTop到最近点击的div的顶部。 这仅部分有效。

我知道问题是什么，但不是解决方案。

问题在于，当我点击不同的新闻项时，它的scrollTop坐标会被自动关闭的div的高度关闭。我已经足够了，解决方案可能很简单，但我没想出来。

该页面在此处显示：http://northqueensviewhomes.com/announcement-test

请记住让您的页面宽度小于767像素并刷新（当您足够小时，您会看到布局响应，然后点击几个顶级警报项目，您最终会看到其中一个滚动方式太高，甚至 down 而不是$this div的顶部。

这是我的jQuery：

if ($('#bboards').length) {

  /* Page Load Cleanup */ 
  $('.announcement_item h2 + div,.alert_item h2 + div').hide().removeClass('toggler');
  $('.moreText').removeClass('hidden');

  function hideAll() {
    $('.announcement_item h2, .alert_item h2').removeClass('toggler').children('.moreText').fadeIn('fast').end().next('div').slideUp('fast');
  }

  $('.announcement_item h2,.alert_item h2').hover(function() {
    $(this).css({
      'cursor': 'pointer',
      'color': '#BC2E34',
    });
  }, function() {
    $(this).css({
      'cursor': 'default',
      'color': 'black',
    });
  }).click(function() {
    if ($('.toggler').length) {
      var previouslySelected = $('.toggler').parent('div').height();
      alert(previouslySelected);
    } else {
      var previouslySelected = 0;
      // alert(previouslySelected);
    }
    if ($(this).hasClass('toggler')) {
      hideAll();
      $('.toggler').removeClass('toggler');
      $(this).children('.moreText').fadeIn('fast'); //this is the "click to read more… text on the link"
      if ($(window).width() <= 767 {
         $('html, body').animate({
            scrollTop: ($(this).parent('div.well').offset().top - 13)
         }, 2222, 'easeInOutExpo');
      }
    } else {
      hideAll();
      $(this).addClass('toggler').next('div').slideDown('fast', 'easeInOutQuad');
      $(this).children('.moreText').hide(); //this is the "click to read more… text on the link"
      if ($(window).width() <= 767) {
         $('html, body').animate({
            scrollTop: ($(this).parent('div.well').offset().top - 13)
         }, 2222, 'easeInOutExpo');
      }
    }
  });
} // <--- End if $('#bboards').length

您可以在页面上看到HTML直播。我添加了一堆虚拟条目只是为了创建页面高度。

我很确定我只需要延迟scrollTop直到slideUp完成，但是，再次，不确定如何。

Answer 1

您可以尝试两种相对简单的解决方案。

首先，如你所说，延迟scrollTop动画：

setTimeout(function() {
    $('html, body').animate({
        scrollTop: ($(this).parent('div.well').offset().top - 13)
    }, 2222, 'easeInOutExpo');
}, 200);

或者，您可以在页面加载后隐藏其内容后记录每个公告的初始位置并发出警报。将标有/* Page Load Cleanup */的部分更改为以下内容：
```
/* Page Load Cleanup */ 
$('.announcement_item h2 + div,.alert_item h2 + div').hide().removeClass('toggler');
$('.moreText').removeClass('hidden');
$('.announcement_item, .alert_item').each(function() {
    $(this).data("top", $(this).offset().top);
});
```
这为每个公告提供了一个存储其初始位置的数据条目。然后，只要您需要为scrollTop设置动画，请执行以下操作：
```
$('html, body').animate({
    scrollTop: ($(this).parent('div.well').data().top - 13)
}, 2222, 'easeInOutExpo');
```
请注意，只有在公告和提醒的内容不会发生变化时，此方法才有效。

我希望这有帮助！

jQuery scrollTop因slideUp div的高度而不正确

1 个答案: