Page scrolls up when I fadein a div and fade out another div

Question

In http://albertanglada.es I have this:

$('#ultimas,#populares').click(function(e) {
  e.preventDefault();
  $('.grupo').hide();
  var id=  'div' + $(this).attr('id');
  $('.grupo#'+id).fadeIn();
});

On http://albertanglada.es/js/custom.js I use it to hide al .groupo elementes and show an specific element. It works, if you click on:
'Últimas añadidas' or 'Populares' in the middle of the page you'll see that some boxes are show/hidden. The problem is that also the page scrolls up if you are on the bottom. I don't want to scroll up the page when those span are clicked.

<span class="left current tooltip" id="ultimas">Últimas añadidas</span> 
<span class="top" id="populares">Populares</span> 

Answer 1

The problem is happening because the wrapper feed-panel-wrapper has no height - so when you hide its content it shrinks to 0px height ... give the div a height or min-height

#feed-panel-wrapper {
   min-height: 300px;
}