How to make a smooth transition to the appeared collapse container?

Question

JavaScript

Привет всем!

Есть страничка сайта, примерно как на рисунке:


Если User прокрутит страничку ниже, то кроме футера там больше ничего нет.
Но при нажатии на одну из кнопок data-toggle="collapse" внизу появляется контейнер соответствующий кнопке.

Вопрос лишь в том, как сделать плавную прокрутку к этому контейнеру после нажатия кнопки?

Код кнопки

<a class="btn btn-lg btn-block btn-outline-light" data-toggle="collapse"
                            href="#block1" role="button" aria-expanded="false" aria-controls="search_region">Кнопка 1</a>

Код блока

<div class="container collapse" id="block1">
     <div class="row">
            <div class="col-12">
                <h1>Я родился!</h1>
            </div>
    </div>
</div>

На другой странице, где просто при нажатии кнопки нужно перейти к существующему блоку использую такой вот JavaScript:

Плавный переход к блоку

jQuery(document).ready(function () {
            jQuery("a.scrollto").click(function () {
                elementClick = jQuery(this).attr("href")
                destination = jQuery(elementClick).offset().top;
                jQuery("html:not(:animated),body:not(:animated)").animate({scrollTop: destination-50}, 1000);
                return false;
            });
        });

Если использую его, то перестает срабатывать collapse, т.е. блок не появляется.

Буду рад любым советам.