страница переходит наверх при нажатии меню

Question

страница переходит наверх при нажатии меню

0

Я создаю веб-сайт с фиксированным меню слева, меню видно при щелчке с помощью jQuery. Моя проблема в том, что когда я прокручиваюсь до нижней части страницы, и я хочу, чтобы меню отображалось, страница перескакивает назад. Я бы хотел, чтобы страница оставалась в текущей позиции при нажатии на меню. Как я могу это сделать?

Это jQuery, который оживляет меню:

$(document).ready(function(){
     $("#closeIcon").hide()
  });

$(document).ready(function(){
  $("#menuIcon").click(function(){
    $(".left").animate({width:'10%'}, "500");
    $(".right").animate({width:'90%'}, "500");
    $("#nav").animate({
                left: '30%',
              }, "500" );
    $("#menuIcon").fadeOut(500)
    $("#closeIcon").fadeIn(500)


  });
});

$(document).ready(function(){
  $("#closeIcon").click(function(){
    $(".left").animate({width:'0%'}, "500");
    $(".right").animate({width:'100%'}, "500");
    $("#nav").animate({
                left: '0',
            }, "500" );
    $("#menuIcon").fadeIn(500)
    $("#closeIcon").fadeOut(500)

  });
});

Само меню расположено за пределами страницы, при щелчке по нему отображается слайды и изменяется основная страница.

fred 24 сен. 2013, в 00:17

Источник

Теги:

javascript

jquery

css

scroll

6 ответов

1

Якорный тег, для которого функция javascript определена для отображения/скрытия меню, должна иметь атрибут href="javascript:void(0)".

Shashank Bhatt 18 янв. 2017, в 04:41

0

Это может быть полезно в некоторых ситуациях

<a href="#dummydiv">Services</a>

Создайте div с именем dummydiv без атрибутов, так как div фактически нигде не используется, когда вы нажимаете на элемент меню, ничего не будет перемещаться. Это полезно для всплывающих меню на устройствах Mobil, в частности, когда вы не хотите, чтобы вещи прыгали по всей странице.

Randy Morgan 24 апр. 2019, в 17:46

0

Я испытал то же самое - мое решение состояло в том, чтобы удалить href= "#", который был у меня в теге <a> значка меню.

Adamonaparte 27 март 2019, в 16:51

0

Еще одно правильно действующее решение;

<...>
$("#menuIcon").click(function(){
    <...>
    return false;
});    

$("#closeIcon").click(function(){
    <...>
    return false;
});

Oshibka404 24 сен. 2013, в 03:42

0

Это html для кнопок Icon, которые открывают и закрывают меню:

   <div id="menu">
      <a href="#"><img id="menuIcon" src="images/menuIcon.png"></a>
      <a href="#"><img id="closeIcon" src="images/closeIcon.png"></a>
    </div>

Это html для меню, которое открывается при нажатии:

<div class="left">
     <div id="nav">                     
        <div id="accordion">
              <!-- accordion menu goes here -->         
    </div> <!--ends accordion-->    
</div>

fred 23 сен. 2013, в 22:25

Ещё вопросы

Eudis Duran · Accepted Answer · 2013-09-23T20-26-00.000Z

Это очень похоже на проблему с якорем. Не увидев HTML, я стану утверждать, что:

Ваш тег ("#closeIcon") должен установить javascript: void (0) на клике, чтобы остановить его от перенастройки позиции страницы. Разум публикует html?

да нет проблем я опубликую html в форме ответа, хотя, если мой ответ будет установить void (0), как именно я это сделаю? где это вписалось бы в javascript / jquery, который я уже написал?
фактически void (0) решил проблему, спасибо!
@ user1324925 Круто, рад, что ты смог понять это.