Closing a menu in mobile javascript

Question:

Good afternoon, I ran into such a problem, there is a landing page, on the mobile version a button appears when you click on which a menu drops out, but when I click on any link in the menu, the menu does not close, the page goes to the desired block, and the menu remains, but what is needed is what would it fold. Already I do not have enough strength, I can not find an error in any way, please help

  $('a.page-scroll').on('click', function(e) {
        var anchor = $(this);
        $('html, body').stop().animate({
            scrollTop: $(anchor.attr('href')).offset().top - 50
        }, 1500);
        e.preventDefault();
    });

    $(window).on('scroll', function() {
        if ($(this).scrollTop() > 100) {
            $('.main-menu').addClass('menu-animation');
        } else {
            $('.main-menu').removeClass('menu-animation');
        }
    });

    $(document).on('click', '.navbar-collapse.in', function(e) {
        if ($(e.target).is('a') && $(e.target).attr('class') != 'dropdown-toggle') {
            $(this).collapse('hide');
        }
    });

    <div class="navbar navbar-default navbar-fixed-top main-menu">
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                <span class="sr-only">Навигация</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a href="index.html" class="navbar-brand"><img src="assets/img/logo.png" alt="logo">
            </a>
        </div>
        <div class="navbar-collapse collapse">
            <nav>
                <ul class="nav navbar-nav navbar-right">
                    <li><a class="page-scroll" href="#home"><span>Главная</span> </a>
                    </li>
                    <li><a class="page-scroll" href="#about"><span>О нас</span></a>
                    </li>
                    <li><a class="page-scroll" href="#pricing"><span>Клиенту</span></a>
                    </li>
                    <li><a class="page-scroll" href="#blog"><span>Галерея</span></a>
                    </li>
                    <li><a class="page-scroll" href="#portfolio"><span>Услуги</span></a>
                    </li>
                    <li><a class="page-scroll" href="#contact"><span>Связь</span></a>
                    </li>
                </ul>
            </nav>
        </div>
    </div>
    <!--- END CONTAINER -->
</div>

Answer:

I found a solution, the problem was not in the js code, but in the html.

<ul class="nav navbar-nav navbar-right">
                        <li><a class="page-scroll" data-toggle="collapse" data-target=".navbar-collapse" href="#home"><span>Главная</span> </a>
                        </li>
                        <li><a class="page-scroll" data-toggle="collapse" data-target=".navbar-collapse" href="#about"><span>О нас</span></a>
                        </li>
                        <li><a class="page-scroll" data-toggle="collapse" data-target=".navbar-collapse" href="#pricing"><span>Клиенту</span></a>
                        </li>
                        <li><a class="page-scroll" data-toggle="collapse" data-target=".navbar-collapse" href="#blog"><span>Галерея</span></a>
                        </li>
                        <li><a class="page-scroll" data-toggle="collapse" data-target=".navbar-collapse" href="#portfolio"><span>Услуги</span></a>
                        </li>
                        <li><a class="page-scroll" data-toggle="collapse" data-target=".navbar-collapse" href="#contact"><span>Связь</span></a>
                        </li>
                    </ul>

Added to each link

data-toggle="collapse" data-target=".navbar-collapse"
Scroll to Top
AllEscort