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坐标时，手风琴部分的高度已经改变，从而导致窗口以错误的位置结束。

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

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

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

您可以在小提琴中看到效果如何