全屏菜单打开时页面跳转到顶部

Question

我正在使用一些代码来禁用滚动并在全屏菜单处于活动状态时保留滚动条，但是当通过单击汉堡图标打开菜单时，页面跳转到顶部。知道如何阻止这种情况发生吗？

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

Answer 1

我会尝试类似的方法：

我正在使用一些代码来禁用滚动并在全屏菜单处于活动状态时保留滚动条，但是当通过单击汉堡图标打开菜单时，页面跳转到顶部。知道如何阻止这种情况发生吗？

.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') )
    })
       
});

这将使主体固定，但会将其位置设置为当前滚动位置而不是页面顶部。

编辑：尝试将滚动位置保存到元素属性，以便您可以在关闭菜单时访问它并相应地设置文档滚动位置

Answer 2

我认为问题出在您的 css，我在我的一些网站上使用了类似的系统，而我使用的 css 只是：

.noscroll {
  overflow: hidden;
}

全屏菜单打开时页面跳转到顶部

Page jumps to top when fullscreen menu open

html

javascript

css

jquery