page goto top when i click the jquery events

Question

Hi friends

when i click the anchor tag that hide the div, i get bump to top of page although the div gets hidden. How do i make browser stay at same place when div gets hidden by clicking that link ? here is the code

< a id="Student" href="#">Click here to hide</a> 

$('#Student').click(function(){
    $('#divHide').hide('slow');
});

Answer 1

You need to prevent the default link behavior like this:

$('#Student').click(function(e){
  $('#divHide').hide('slow');
  e.preventDefault();
});

Or this:

$('#Student').click(function(){
  $('#divHide').hide('slow');
  return false;
});

event.preventDefault() or return false; will both prevent what the browser does by default which is going to the hash (#) for a location, causing a scroll to the top. The difference between the two is that return false also kills the event, preventing it from bubbling as well.