How can I make my fullscreen menu overlay jump to top before it is opened?

How can I make my fullscreen menu overlay jump to top before it is opened?

Hello! Happy holidays! :-)

I am using the following for a fullscreen overlay navigation.

  1.   // Menu variables
        var $menuTrigger = $('#brgr');
        var $menuArea = $('#menu');

        // Header variables
        var $headerLogo = $('header > .constraint > .logo');
        var $closeIcon = $('nav#menu > #menu-area a.close');

        var menuOpen = false;

        $menuTrigger.on('click', function () {
            if (!menuOpen) {
                $(window).scrollTop(0);
                $menuArea.addClass('is-open');
                $headerLogo.addClass('is-open');
                $menuTrigger.addClass('invis');
                menuOpen = true;
            }
        });
        $closeIcon.on('click', function () {
                $menuArea.removeClass('is-open');
                $headerLogo.removeClass('is-open');
                $menuTrigger.removeClass('invis');
                menuOpen = false;
        });

I have an issue that I can not work out how to fix. When the user clicks the #brgr div, a fixed div, with overflow-y:scroll is made visible. The issue I am having is if the overlay menu was at the bottom, when the user clicks the closeIcon, when they open the menu again via the #brgr, it is the bottom of the menu (where they were before they closed it) that is shown.

How can I get it so that it shows the top of the div, when they click the $menuTrigger #brgr?

  1. $(window).scrollTop(0);

With no luck. If I add an anchor to the top of that DIV, how can I on the click get it to jump to that, before it is opened?

I am so grateful to any guidance

Thanks,

David