javascript - ScrollTop 转到错误的顶部

Question

我有一个项目列表。当我单击一个项目(项目)时，它会打开(这是可以的)，并且滚动到页面顶部(错误的顶部!)。当我打开一个项目并决定打开下面的项目时，就会出现问题:顶部位置增加了打开的项目高度，而我单击的第二个项目距离顶部太远。

按照下面的 FIDDLE:如果我打开 project1 然后单击 project2，则会出现错误的顶部。如果我尝试打开另一个打开的项目下面的任何项目，情况也是如此。

JS

$('.accordion-section-title').on('click', function () {
    var idName = $(this).attr('id');

    $('html, body').animate({
        scrollTop: $("#" + idName).offset().top
    }, 500);
});

这是FIDDLE

Answer 1

问题似乎是 .slideUp() 和 .slideDown() 方法在窗口滚动的同时进行动画处理。当窗口滚动到右侧 Y 坐标时， Accordion 部分的高度已更改，从而导致窗口最终位于错误的位置。

我确信还有其他方法可以实现正确的滚动位置，但我的第一个想法是在页面加载后存储初始 Y 位置。这可以通过以下方式完成:

$('.accordion-section-title').each(function() {
  $(this).data('ypos', $(this).offset().top)
})

每个 .accordion-section-title 元素都将其 Y 位置存储在名为 ypos 的数据属性中。稍后当您滚动窗口时，不要滚动到元素位置，而是滚动到其存储的初始位置。换句话说，将 scrollTop: $("#"+ idName).offset().top 更改为 scrollTop: $("#"+ idName).data('ypos')。与您的代码放在一起，它将如下所示:

$('.accordion-section-title').on('click', function(e) {
  var idName = $(this).attr('id');
  $('html, body').animate({
    scrollTop: $("#" + idName).data('ypos') - 10
  }, 500);
});

您可以在this fiddle中看到它是如何发挥作用的。