Anchors to pages with Masonry layouts

问题

Since I first posted this issue, I have decided upon an approach but either it is just plain wrong or improperly implemented.

ISSUE I have several pages containing div content and using jQuery Masonry for the layout. These pages have cross referencing links via anchors pages. E.g the fifth content div on page A links to an anchor on the ninth div on page B.

The issue is the anchor positions don't properly exist until Masonry finishes - i.e. the anchors work fine with Masonry turned off, but links end up going to the top of the pages when Masonry is functioning.

Attempted Solution I am presuming that I need to stall the anchor seeking action until Masonry has finished up but I can't figure out how to implement my presumed method of calling a scroll function after Masonry has completed.

Am I even close with the way I am trying to code it:

 /* Masonry */
jQuery(document).ready(function() {
var $container = $('#items');
$container.imagesLoaded(function(){
    $container.masonry({
        itemSelector : '.item',
        columnWidth : 470,
        isAnimated: true
    });
});

//Call Scroll function after Masonry complete
 msnry.on( 'layoutComplete', function( msnryInstance, laidOutItems ) {

    if (window.location.hash) {// Scroll function
        setTimeout(function() {
            $('html, body').scrollTop(0).show();
            $('html, body').animate({
                scrollTop: $(window.location.hash).offset().top -20 
                }, 1000)
        }, 100);
    };//End scroll function


  }); // End Masonry complete function

});

While it would be nice to have a smoothscroll solution. I would be more than humbly grateful to just get to the right part of the page.

PS - I am also aware that there may be an issue with getting an accurate or consistent response from Masonry jQuery masonry how to call layoutComplete

来源：https://stackoverflow.com/questions/23908582/anchors-to-pages-with-masonry-layouts

标签

anchor

masonry