ScrollTop 转到错误的顶部答案

【问题标题】：ScrollTop goes to the wrong topScrollTop 转到错误的顶部
【发布时间】：2017-12-26 22:37:58
【问题描述】：

我有一个物品清单。当我单击一个项目（项目）时，它会打开（这没关系）并滚动到页面顶部（错误的顶部！）。当我有一个打开的项目并决定打开下面的项目时会出现问题：顶部位置增加了打开的项目高度，而我单击的第二个项目超出了顶部。

按照下面的 FIDDLE：如果我打开 project1 然后我点击 project2，这会出现在错误的顶部。如果我尝试在另一个打开的项目下方打开任何项目，则相同。

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

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

这是FIDDLE

【问题讨论】：

如果将scrollTop: $("#" + idName).offset().top - 10}, 500) 替换为scrollTop: $(this).offset().top - 10}, 500) 会怎样？
它没有改变，我认为这些项目本身就可以滚动：这是我想要摆脱的不断变化的顶部位置。
哦，再看一遍，我相信问题是由打开手风琴部分的窗口计算滚动位置引起的。当它们关闭时，内容的高度会改变，因此窗口会滚动到错误的 Y 位置。
Exaclty，我不知道如何让所有项目都停在右上方，而不需要滚动计算打开项目的空间。

标签： javascript jquery accordion offset scrolltop

【解决方案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看到它是如何发挥作用的

【讨论】：

这是我一直在寻找的完美解决方案！非常感谢你。我不想显得自命不凡，但是您知道在页面加载时如何打开第一个项目吗？再次感谢您的帮助！
我很高兴它对你有用！ :o) 我现在不在办公桌前，所以无法为您提供工作代码 sn-p。我要做的是将 CSS 类应用于第一个手风琴，使其显示为打开状态。然后在另一个部分被激活时删除这个类。或者您可以使用 jquery 触发点击。例如。 $('.my-first-accordion-title').trigger("click").
好吧，你绝对成就了我的一周！作为 jQuery 的初学者，我开始感觉良好。我使用$("div.accordion div:first-child .accordion-section-title").trigger('click');}); 以便始终打开最后一个项目。