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

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

});

这将使正文固定，但它将把其位置设置为当前滚动位置，而不是页面顶部。

编辑:尝试保存scrollposition to element属性，以便您可以在关闭菜单时访问它并相应地设置文档滚动位置

Answer 2

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

.noscroll {
overflow: hidden;
}