Открытие меню гамбургера сбрасывает прокрутку на веб-странице

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 для наложения меню. Заранее спасибо!

javascript jquery html

0

s123c 25 Апр 2017 в 00:25

Answer 1

Измените кнопку меню на 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; }

Надеюсь это поможет

-1

simcolo 24 Апр 2017 в 21:51

Answer 2

Вы можете использовать событие в вашей функции onClick и установить его в предотвращение дефолта ().

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

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

1

ad_on_is 24 Апр 2017 в 22:10

Открытие меню гамбургера сбрасывает прокрутку на веб-странице

2 ответа

Похожие вопросы

Новые вопросы

javascript