Получение точного смещения при использовании jQuery Accordion ⇐ CSS

[Anonymous]

Я создал на своей веб-странице аккордеон, в котором раскрываются ответы (A) на вопросы (Q). Если пользователь нажимает Q1, элемент div A1 прокручивается вниз, чтобы открыться, а если пользователь нажимает Q2, элемент div A1 сдвигается вверх, чтобы скрыться. и div A2 опускается вниз, чтобы появиться. У меня есть настройка jquery, чтобы держать выбранный/активный вопрос (Q) в верхней части экрана, это основная часть, которую я настраиваю с помощью jQuery.
Проблема, с которой я сталкиваюсь, заключается в том, что пользователь нажимает кнопку мыши. Q1 и прокручивает вниз, не закрывая его, до Q2 и щелкает по нему, сначала закрывается div A1, а затем открывается div A2, тем временем Q2, который должен прокручиваться вверх в верхней части страницы, перемещается дальше вверх, потому что div A1 закрывается и смещение, которое я получаю, неточно. Я использую приведенный ниже код, чтобы элемент «Вопрос» находился в верхней части страницы. Как я могу получить точное смещение, когда пользователь нажимает «Вопросы», не закрывая их? Обратите внимание, что высота разделителей ответов различается в зависимости от контента.

Код: Выделить всё

jQuery(document).ready(function($) {

$('.e-n-accordion-item').on('click', function() {
var offset = $(this).offset();
var scrollTop = $(window).scrollTop();
var topRelativeToScroll = offset.top - scrollTop;
var scrollToPosition = $(window).scrollTop() + topRelativeToScroll - 100;

console.log(scrollToPosition);

$('html, body').animate({
scrollTop: scrollToPosition
}, 1);
});

});

Код: Выделить всё

Подробнее здесь: https://stackoverflow.com/questions/790 ... -accordion