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

2017-04-24 26 views 0 likes

我最近添加了一个移动汉堡菜单到我的网站。不过，我的网站主要由一个页面构成，当我打开菜单时，无论您在页面中滚动什么，它都会将您带到最高层。此外，这似乎发生在打开菜单以及关闭菜单时的开始处。我可以说，因为我注意到点击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脚本。在此先感谢！

来源

2017-04-24 s123c

回答

-1

改变你的菜单按钮，一个div并在其上坚持一个id（这将删除跳跃），然后在你的JavaScript添加点击关闭

例如

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

希望这有助于

来源

2017-04-24 21:51:47 simcolo

这样定了！谢谢，我已经投票赞成，但我很乐意展示它。 – s123c

你可以在你的onClick功能使用事件并将其设置为preventDefault（）方法

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

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

来源

2017-04-24 22:10:13

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

回答

相关问题