Почему ScrollTo иногда зависает? ⇐ Jquery

[Anonymous]

По сути, на моем веб-сайте есть главный раздел, внизу которого есть кнопка. Кнопка позволяет пользователю автоматически прокручивать мимо героя к следующему элементу.
Проблема: если пользователь прерывает анимацию прокруткой, в следующий раз, когда он нажмет кнопку, появится анимация прокрутки. застревает – или иногда прокручивает только на 10–50 пикселей вместо полных 100 пикселей.
HTML





JS
//Hero Arrow Scroll Button
var isScrolling = false;
let B1 = $(".B1");

$(document).on('click', '#js-hero-arrow', function() {

if (isScrolling === false) {

isScrolling = true;

scrollToElementTop(B1).then(() => {
isScrolling = false;
});

}

});

//Function to add a callback to the scroll element top
function scrollToElementTop (elem) {

const targetPosition = (elem.offset().top + elem.outerHeight(true));

window.scrollTo({
top: targetPosition,
behavior: 'smooth'
});

return new Promise(resolve => {
const scrollHandler = () => {
if (window.scrollY === targetPosition) {
window.removeEventListener('scroll', scrollHandler)
resolve();
}
}
window.addEventListener('scroll', scrollHandler)
});
}

^ Функция «scrollToElementTop» не моя. Я нашел его в stackoverflow и надеялся, что добавление обратного вызова и isScrolling решит мою проблему, но этого не произошло.
Вопросы
Почему это происходит и что я могу сделать, чтобы это исправить?

РЕДАКТИРОВАТЬ:
Без взлома это выглядело так:
//Hero Arrow Scroll Button
let B1 = $(".B1");

$(document).on('click', '#js-hero-arrow', function() {

const targetPosition = B1.offset().top + B1.outerHeight(true);

window.scrollTo({
top: targetPosition,
behavior: 'smooth'
});

});


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