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() 方法在 window 滚动的同时进行动画处理。当 window 滚动到右侧 Y 坐标时，手风琴部分的高度已经改变，从而导致 window 最终出现在错误的位置。

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

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

每个 .accordion-section-title 元素都将其 Y 位置存储在名为 ypos 的数据属性中。稍后当您滚动 window 时，不要滚动到元素位置，而是滚动到其 存储的初始位置 。换句话说，将 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

中看到结果如何

ScrollTop 跳到错误的顶部

ScrollTop goes to the wrong top

javascript

jquery

accordion

offset

scrolltop