page jumps to top on menu click

Question

I am creating a website with a fixed menu on the left, the menu is visible on click with jQuery. My problem is that when I am scrolled down to the bottom of the page and I want to bring the menu into view the page jumps back to the top. I would like the page to stay in its current position when clicking on the menu. How can I do this?

This is the jQuery thats animates the menu in and out:

$(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)

  });
});

The menu itself is positioned outside the page, on click it slides in and the main page resizes.

is "#closeIcon" a link? If so, you're missing your e.preventDefault() on the click event. — Jesse Kernaghan, Sep 23 '13 at 21:50

score 5 · Answer 1 · edited Jan 18 '17 at 07:15

5

Anchor tag on which javascript function is defined to show/hide menu should have attribute href="javascript:void(0)".

edited Jan 18 '17 at 07:15

Jaap

81,064
34
182
193

answered Jan 18 '17 at 06:22

Shashank Bhatt

717
1
11
28

score 4 · Accepted Answer · answered Sep 23 '13 at 21:47

4

This sounds very much like an anchor tag issue. Without seeing the HTML I will wager that:

Your tag ("#closeIcon") needs to set javascript:void(0) on click to stop it from readjusting the page position. Mind posting up the html?

answered Sep 23 '13 at 21:47

Eudis Duran

742
3
16

yes no problem I will post the html in the form of an answer, although if my answer would be to set void(0) how exactly would I do this? where would that fit in to the javascript / jquery I have already written? – fred Sep 24 '13 at 01:05
@user1324925 Awesome, glad you were able to figure it out. – Eudis Duran Sep 24 '13 at 15:55

score 1 · Answer 3 · answered Sep 24 '13 at 06:41

1

Another one properly working decision;

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

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

answered Sep 24 '13 at 06:41

Andrey Ozornin

1,129
1
9
24

This is the one working for me, I wasn't using tags. – Sergi May 04 '20 at 23:24

score 0 · Answer 4 · answered Sep 24 '13 at 01:15

This is the html for the Icon buttons, that open and close the menu:

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

This is the html for the menu which opens on click:

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

score 0 · Answer 5 · answered Mar 27 '19 at 18:50

0

I experienced the same - my solution was to remove the href="#" which I had on the <a> tag of the menu icon.

answered Mar 27 '19 at 18:50

Adamonaparte

1

score 0 · Answer 6 · answered Apr 24 '19 at 20:21

This may be of use in some situations

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

Create a div named dummydiv with no attributes, since the div is not actually used anywhere when you click on a menu item nothing will move. This is useful for flyout menus on Mobil devices in particular when you do not want things jumping all over the page.

score 0 · Answer 7 · answered Jan 04 '22 at 21:08

I answered a similar problem here: Prevent background scrolling when overlay appears

The gist: use the overflow:hidden property on the html tag rather than the body.

Here is your code revised:

.lock-scroll {
  overflow: hidden;
}

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

$(document).ready(function(){
  $("#menuIcon").click(function(){
    $('html').addClass('lock-scroll');
    $(".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(){
    $('html').removeClass('lock-scroll');
    $(".left").animate({width:'0%'}, "500");
    $(".right").animate({width:'100%'}, "500");
    $("#nav").animate({
                left: '0',
            }, "500" );
    $("#menuIcon").fadeIn(500)
    $("#closeIcon").fadeOut(500)

  });
});

page jumps to top on menu click

7 Answers7

Linked