jQuery addClass cause window to scroll back to top on Android and iPhone

Question

I am working on a page where on the bottom sits an element, that is activated by tapping on it. The element then expands (instantly) in height to reveal its content. It's done by adding a class (".active") with jQuery to that element.

The things .active really adds is a display block, and some height. However every time you tap it, the browser jumps back to top. If I comment out the addClass part in the javascript, it behaves normal.

Just for the heads up, the anchor tag does not have a "href=#".

Answer 1

As a temporary fix you could put the screen back into position each time it is clicked..

$('.troublemaker').click(function(e){
   var currentScroll = $(document).scrollTop();
   setTimeout( function(){  $(document).scrollTop( currentScroll ); }, 10 );
});