How to hide bootstrap menu on click?

Question

css

Good day! On a bootstrap menu site, it works on anchors. I want that when you click on the link, it would accordingly transfer to the desired part of the page and hide. I tried to remove the in class with js but then it doesn't transition correctly. Here is the js that is responsible for the smooth transition:

$("#menu").on("click","a", function (event) {
    event.preventDefault();
    var id  = $(this).attr('href'),
        top = $(id).offset().top;
    $('body,html').animate({scrollTop: top}, 600);
    // $('#bs-example-navbar-collapse-1').removeClass('in'); Вот этот класс у меня стоял которым я убирал класс in
});

Perhaps it seems to me that somehow the script will not measure the position very correctly. I am not strong in js. Tell me how to do it right.
Thanks in advance!

Answer 1

since there is no complete code ... let's try to treat the photo.

var $scrollTo; // для передачи данных между функциями сохраняем до какого объекта будем скроллить

$("#menu").on("click","a", function (event) {
    event.preventDefault();
    $scrollTo= $($(this).attr('href'));
    $("#menu").collapse(); // сворачиваем меню тут координаты могут поменяться во время сворачивания
});

$('#menu').on('hidden.bs.collapse', function () { // обработчик события уже после того, как меню свернулось
    var top = $scrollTo.offset().top; // получили куда скроллить не в объектах, а в пикселях
    $('body,html').animate({scrollTop: top}, 600);
});