Question

我最近在我的网站上添加了一个移动汉堡包菜单。但是我的网站主要包含并围绕一个页面构建。当我打开菜单时，无论您在页面中的哪个位置滚动，它都会将您带到顶部。此外，这似乎发生在打开菜单的开始以及关闭菜单时。我可以告诉，因为我注意到单击ID链接时屏幕滚动，但当一个退出菜单时，页面的滚动会回到顶部。我相信这个问题与我使用的JavaScript代码有关。我搞砸了，但我找不到问题。任何帮助表示赞赏！

以下是JSFiddle上的示例：https://jsfiddle.net/47dtoc6c/1/

/* For Overlay on Menu */

$(document).ready(function(){
    $(".button a").click(function(){
        $(".overlay").fadeToggle(200);
       $(this).toggleClass('btn-open').toggleClass('btn-close');
    });
});
$('.overlay').on('click', function(){
    $(".overlay").fadeToggle(200);
    $(".button a").toggleClass('btn-open').toggleClass('btn-close');
    open = false;
});

上面是菜单覆盖的Jquery脚本。提前谢谢！

Answer 1

您可以在onClick函数中使用该事件并将其设置为preventDefault（）

$(".button a").click(function(event){
        event.preventDefault();
        ....
}

https://jsfiddle.net/47dtoc6c/2/

Answer 2

将菜单按钮更改为div并在其上粘贴ID（这将删除跳转），然后在您的javascript中添加单击以关闭

e.g。

<div id="nav2">
  <div class="button">
    <div id=menu class="btn-open" ></div>
</div>



$(document).ready(function(){
   $("#menu").click(function(){
        $(".overlay").fadeToggle(200);
        $(this).toggleClass('btn-open').toggleClass('btn-close');
    });

}）;

CSS

#menu { cursor: pointer; }

希望这有帮助

打开汉堡包菜单重置网页上的滚动

2 个答案: