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的数据属性中。稍后滚动窗口时，不要滚动到元素位置，而是滚动到其存储的初始位置。换句话说，将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中的表现