Я недавно добавил мобильное меню гамбургера на свой сайт. Однако мой сайт в основном состоит из одной страницы. Когда я открываю меню, независимо от того, где вы прокручиваете страницу, оно приводит вас к вершине. Также это происходит в начале открытия меню, а также при закрытии меню. Я могу сказать, потому что я замечаю прокрутку экрана при переходе по ссылкам 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 для наложения меню. Заранее спасибо!
2 ответа
Измените кнопку меню на div и прикрепите к нему идентификатор (это уберет скачок), затем в своем 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; }
Надеюсь это поможет
Вы можете использовать событие в вашей функции onClick и установить его в предотвращение дефолта ().
$(".button a").click(function(event){
event.preventDefault();
....
}
https://jsfiddle.net/47dtoc6c/2/
Похожие вопросы
Новые вопросы
javascript
По вопросам программирования на ECMAScript (JavaScript / JS) и его различных диалектах / реализациях (кроме ActionScript). Включите все соответствующие теги в свой вопрос; например, [node.js], [jquery], [json] и т. д.