Page jumps to top when fullscreen menu open

Question

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

is the .btn-open-menu an tag? If yes you need to pass the event in function () and then preventDefault. If it's an tag answer here and I'll post a proper answer — Jonas Grumann, Jun 01 '22 at 09:34
Yes its an tag, could you post the amended code below so I can understand please? — gjjr, Jun 01 '22 at 09:37
What do you have as href attribute on the a tag? Asking to complete the answer — Jonas Grumann, Jun 01 '22 at 09:39
In that case the issue is not what I though. I suspect I know what could be the real issue though so I'll post an answer nonetheless, but you should consider creating a code snipped the replicates the issue, right now we're all just speculating — Jonas Grumann, Jun 01 '22 at 09:45

Jiří Melen · Accepted Answer · 2022-06-01T09:48:13.320

1

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

edited Jun 01 '22 at 09:48

answered Jun 01 '22 at 09:31

Jiří Melen

147
8

This seems to work when opening the menu, but when I close the menu it jump to the top now? – gjjr Jun 01 '22 at 09:36
Try the example after edit, you have to somehow save the position when opening menu so you can use it when closing – Jiří Melen Jun 01 '22 at 09:40
still jumping to top on close – gjjr Jun 01 '22 at 09:42
1

Sorry, the value has to be added inside of brackets, not with "=" sign Also, have you checked if the attribute is being created with value? – Jiří Melen Jun 01 '22 at 09:48
This is working now but when closing the menu it auto scrolls from the top of the page to wherever I was on the page when I opened the menu, is there anyway to stop the scrolling so it just takes you to where you were on the page instantly? – gjjr Jun 01 '22 at 09:50
1

The Scrolltop function should not be animated unless you specify it should, try looking around, if you've set some kind of animation/transition rule – Jiří Melen Jun 01 '22 at 09:56

score 0 · Answer 2 · answered Jun 01 '22 at 09:46

0

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

answered Jun 01 '22 at 09:46

Jonas Grumann

10,438
2
22
40

yeh this works but it makes the page jump sideways as the scrollbar gets hidden. Using ```position: fixed; overflow-y:scroll;``` makes the scrollbar visible so that the content doesnt jump sideways, but now i have the issue with the page jumping to the top. – gjjr Jun 01 '22 at 09:48
1

Have you tried the method from this issue? https://stackoverflow.com/questions/8701754/how-to-disable-scroll-without-hiding-it – Jonas Grumann Jun 01 '22 at 09:51

Page jumps to top when fullscreen menu open

2 Answers2