Prevent .click function jumping to top of the page

Question

Im using the below code to simulate a .animate toggle effect. However, when clicking the page will jump to the top. I've tried using prevent but it still jumps so I think I'm missing something... Any ideas?

$(function() {
$('.menu-toggle').click(function() {
  var clicks = $(this).data('clicks');
  if (clicks) {// odd clicks 

    $(this).find('i').toggleClass('fa-bars fa-times');
    $(this).toggleClass('cross');
    $('.menu-over ul li').toggleClass('animated-fast slideInLeft')

    $(".menu-over").animate({
    left: "-50%",
    }, 1000 );

    $( ".mainsite" ).animate({
    left: "0%",
    width:"100%" ,
    }, 1000 );

  } else {// even clicks

    $(this).find('i').toggleClass('fa-bars fa-times');
    $(this).toggleClass('cross');
    $('.menu-over ul li').toggleClass('animated-fast slideInLeft')

    $(".menu-over").animate({
    left: "0%",
    }, 1000 );

    $( ".mainsite" ).animate({
    left: "50%",
    width:"50%" ,
    }, 1000 );

  }
  $(this).data("clicks", !clicks);
});
});

Is your click element an ``? Check `preventDefault()` – Shaunak D May 10 '15 at 03:19 — Shaunak D, May 10 '15 at 03:19
Use javascript:void(0) in href of a to avoid any action – Palash May 10 '15 at 10:06 — Palash, May 10 '15 at 10:06

score 0 · Answer 1 · answered May 10 '15 at 00:42

0

Try to return false at the end of the function. Greetings

answered May 10 '15 at 00:42

Andre Lehnert

531
4
9

Thanks for these, unfortunately it still jumps to the top. I think its something to do with the odd/even clicks functions that is causing it but can't figure it out... – Scott Eldo May 10 '15 at 06:58

score 0 · Answer 2 · answered May 10 '15 at 04:55

0

You should have .preventDefault() inside your click event:

  $('.menu-toggle').click(function(event) {
         event.preventDefault();

or you can use return false; which should work the same way in your case:

  $('.menu-toggle').click(function(event) {
         return false;

answered May 10 '15 at 04:55

renakre

8,001
5
46
99

Thanks for these, unfortunately neither work. I think its something to do with the odd/even clicks functions that is causing it but can't figure it out... – Scott Eldo May 10 '15 at 06:58

score 0 · Answer 3 · answered May 10 '15 at 10:41

0

Figured it out. Thanks for all the suggestions but strangely none of them worked. It was the animation of width on .mainsite that was causing it. Changed it to a padding effect instead and now all stays put when clicked.

answered May 10 '15 at 10:41

Scott Eldo

473
11
28

Prevent .click function jumping to top of the page

3 Answers3