The webpage is getting scrolled to the top location while destroying isotope and resetting it

Question

I'm using http://isotope.metafizzy.co/'s isotope plugin to create grid layout. On clicking any of the grids, I display a modal popup showing the details. On closing the modal popup, control comes back to the old isotope grid layout. The content of the modal popup are hidden under the part of the isotope item. I had problems with the content in the modal popup being displayed properly. So, what I did is, on clicking any of the isotope's grid <a> item, I used $.isotope('destroy');. Only then, the modal popup worked properly. Further, upon closing the modal popup, I re-initialise the isotope grid using the following code:

    $("#container").isotope({
     itemSelector:".item",
     masonry:{
     columnWidth:100,
     gutterWidth:20
     },
     animationOptions:{
     duration: 750,
     easing: 'linear',
     queue: false
    }
    });

I have added return false; at the end of all the functions handling <a> element's onclick event (using jQuery's delegate() function).

Upon re-initialisation, the page scrolls back to the top. Other than this, there is no problem with the usability of the page. I'm stuck. Please help.

Answer 1

You should not need to use the destroy method or any special tricks with modal windows and Isotope; have you tried this here or similar ones to show static or dynamic content? It does work here to reveal more stuff. If you only worry about the page scroll, Lix gets the green : )

Answer 2

I'm not too familiar with the isotope plugin you are using, but preventing that page scroll as a result of clicking on <a> elements can be prevented.

Instead of return false, you could try preventDefault().

On a click handler (for example) you would do this -

$('a').on('click',function(e){
  // other code here
  e.preventDefault();
});