Page jumps to top when fullscreen menu open-CodePudding

I am using some code to disable scrolling and also retain the scrollbar when the fullscreen menu is active, but when the menu is opened by clicking the hamburger icon, the page jumps to the top. Any idea how to stop this happening?

.noscroll {
  position: fixed;
  overflow-y:scroll;
}

jQuery(document).ready(function($){
    $('.btn-open-menu').click(function () {
      $('html, body').addClass('noscroll');
    })
    
    $(document).on('click','.btn-close-menu', function(event){
        $('html, body').removeClass('noscroll');( {}, event);
    })
       
});```

CodePudding user response：

I think the issue is your css, I use a similar system on some of my sites and the css I use is just:

.noscroll {
  overflow: hidden;
}

CodePudding user response：

I would try something like:

.noscroll {
  position: fixed;
  overflow-y:scroll;
}
jQuery(document).ready(function($){
    $('.btn-open-menu').click(function () {
      let scrollPosition = $(document).scrollTop();
      $('html, body').addClass('noscroll');
      $('html, body').css('top', '-' scrollPosition 'px');
      $('html, body').attr('data-scroll', scrollPosition);
    })
    
    $(document).on('click','.btn-close-menu', function(event){
        $('html, body').removeClass('noscroll');( {}, event);
        $(document).scrollTop( $('html, body').attr('data-scroll') )
    })
       
});

This will make the body fixed, but it will set its position to the current scroll position instead of the top of the page.

EDIT: Try saving the scrollposition to element attribute so you can access it while closing the menu and set the document scroll position accordingly