jquery - 組積造セット内にアンカー リンクを作成する

Question

メイソンリーに特有の問題があり、助けてもらいたいと思っています。Typekit を介して外部からフォントをロードしているため、document.ready の代わりに window.load 内に Masonry コードを含める必要があります (Masonry をロードする前にフォントをロードする必要があります。そうしないと、行の長さが異なり、絶対位置がめちゃくちゃになるためです)ソース）。Masonry グループ内のセクションに (ページ内のアンカーとして) 直接リンクする必要もあります。これら 2 つのことを組み合わせた場合の問題は、window.load を使用すると、ページが読み込まれたときにアンカーが存在しないため、リンクが Masonry セクション内の特定のセクションではなく、Masonry セクションの先頭に移動することです。これを修正する方法のアイデアはありますか? 最も簡単な解決策は、window.load に頼らずにコードを機能させることです。残念ながら、私は代替案を見つけることができませんでした。どんな助けでも素晴らしいでしょう。

Answer 1

1. Typekit フォント イベントを使用して、フォントが読み込まれている/読み込まれていない石積みをトリガーします
2. $(window).load() を使用してハッシュをキャッチし、強制的にスクロールします。

---

var $container;

function triggerMasonry() {
  // don't proceed if doc not ready
  if ( !$container ) {
    return
  }
  $container.masonry({
    // options...
  });
}

$(function(){
  $container = $('#container');
  triggerMasonry();
});

// trigger masonry after fonts have loaded
Typekit.load({
  active: triggerMasonry,
  inactive: triggerMasonry // triggered in Chrome
});

// catch any hashes and force scroll to them
// resolves Masonry bug
var $window = $(window);

$window.load(function(){
  if ( window.location.hash ) {
    var destination = $( window.location.hash ).offset().top;
    $window.scrollTop( destination );
  }
});