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.
- // 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?
$(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