Javascript 滚动至单击/打开div并按以前打开的div进行偏移

我这里的问题是如何滚动到另一个div关闭时单击的div的顶部。如果没有打开的div，我可以让它工作，但是如果有一个打开的div，它将无法滚动到新打开的div的顶部。我假设我需要用旧的打开div进行偏移。但不确定如何进行。这是供参考的小提琴-

缩短代码： HTML:

jQuery：

$('.option-content,.arrow-up, .arrow-down:first').hide();
$('.option-content:first,.arrow-up:first').show();
$('.option-heading').click(function () {
    $('.option-content').not($(this).next()).slideUp(250);
    $('.option-heading').not(this).find('span.arrow-up').hide();
    $('.option-heading').not(this).find('span.arrow-down').show();
    $(this).next('.option-content').slideToggle(250);
    $(this).find('.arrow-up, .arrow-down').toggle();
//Jump to Open Div
    $('html,body').animate({scrollTop: $(this).offset().top - 10}, 'fast');
});

---

我的方法是给标题一个id

<h1 id="4">Year4 ....

---

很有魅力。。可能不是在JSFIDLE tough中，问题不在于您必须用旧的open div进行补偿：只有当旧的open div高于新的open div时才是问题，这意味着这是一个新div的相对位置在动画期间发生变化的问题。（如果旧div低于新div，则新div的位置在动画期间不会更改。）

---

要解决此问题，您需要修改动画，以便在旧div关闭后进行滚动。

隐藏内容后，存储每个

选项标题的顶部偏移量

：

$('.option-content,.arrow-up, .arrow-down:first').hide();

$('.option-heading').each(function() {
  $(this).data('top', $(this).offset().top - 10);
});

然后，您可以将

滚动条设置为该位置的动画：

$('html,body').animate({scrollTop: $(this).data('top')}, 'fast');    

请注意，您的ID只能在HTM5中以非字母字符开头，而在以前的HTML版本中则不能。我将查看队列，因为它似乎是解决方案—在关闭后进行滚动。不过出于好奇，是否只有当div在上面时，才没有办法容纳旧div的高度并使用该值动态偏移scrollto？并不是说这是一个好的做法，但我想看看有人会怎么做。这正是我想要做的。
yoururl.com/index.html#4

$('.option-content,.arrow-up, .arrow-down:first').hide();

$('.option-heading').each(function() {
  $(this).data('top', $(this).offset().top - 10);
});

$('html,body').animate({scrollTop: $(this).data('top')}, 'fast');