Плавная прокрутка страницы при использовании jQuery ui изменяемого размера

Question

Так что я хочу знать, как я могу плавно прокручивать страницу вниз, когда я изменяю размер div ниже нижней части браузера.

Пока что я настроил то, что когда вы изменяете размер div и он достигает последних 30 пикселей браузера, он начинает прокручивать страницу вниз. Эта часть работает, но это отрывисто при этом.

Мой код:

// $maxHeight is set above this, it just takes all the elements within the div and and get's the total height and set that as maxHeight
$('.notifications-drop-down').resizable({
    maxHeight: $maxHeight,
    minHeight: 400,
    handles: {
        's': '.ui-resizable-s'
    },
    resize: function(event, ui){
        if((ui.position.top + ui.size.height) > ($(window).scrollTop() + $(window).height() - 30)){
            $(window).scrollTop($(window).scrollTop()+10);
        }
    }
});

Что я пытался это исправить: добавление функции анимации к scrollTop чтобы сделать это более гладким

$('html,body').animate({scrollTop: $(window).scrollTop()+30}, 200);

Но это не работает гладко. Я изменил продолжительность анимации, и она все еще не плавная. Кто-нибудь знает, что я могу сделать, чтобы это было гладко?

Что-то, что я заметил, было то, что, когда страница прокручивается вниз, она не распознает, что div находится в нижних 30 пикселях, поэтому он не пересчитывает, если он должен прокрутить вниз больше (вам нужно покачивать курсор при изменении размера div, чтобы он работал), я Я попытался добавить тот же код для прокрутки вниз в функцию остановки изменяемого размера, но это также не помогло.

Спасибо за время.