Page jumps to top when fullscreen menu open

Issue

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);
    })
       
});```

Solution

I would try something like:

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 () {
      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

Answered By – Jiří Melen

Answer Checked By – Mildred Charles (AngularFixing Admin)

Leave a Reply

Your email address will not be published.