【fancybox】ajaxで別ページの特定の場所を表示させる

このサイトはLightBox的な処理をfancyboxというライブラリで処理しているのですが、別ページの特定の場所を表示できないかなぁと思いテストしてみました。
何がしたかったかというと、個別のエントリーではアーカイブページへのリンクを持たずにひとまとめにしておいて、ボタンをクリックしたときにAjaxで情報をとりに行くようにしたらエントリーページの情報量を減らせるんじゃないかと思ったのです。

いろいろらべて何とか別ページの特定の場所を呼び出すことができましたが、まだいまいち理解できていないですね...。

Ajax処理はこんな感じ、

<script>
  //Ajax
  $(document).ready(function(){
    $('.fancybox').click(function(e) {	
      if (e.preventDefault) {
        e.preventDefault();
      }else {
        e.returnValue = false;
      }			
      
      var uri = $(this).attr("href").split("#")[0];
      var hash = "#"+$(this).attr("href").split("#")[1];
  
      $.ajax({
        url: uri,
        dataType: 'html',
        cache: true,
        success: function(html){				
          var $content = $(html).find(hash);
          $.fancybox({'content':$content});
        }
      })
        return false;	  
    });
  });		
  </script>
  

archive.htmlの#archive-comtents内のコンテンツを表示します。

<a class='fancybox' href="archive.html#archive-comtents">アーカイブ</a>

archive.htmlはこんな感じ、なぜかarchive-comtentsを囲う要素がないと呼び出せないのですが、原因を理解できていません...。

<div id="archive">
    <div id="archive-comtents">
    
    <!-- 呼び出すコンテンツ--->
    
    <!-- /#archive-comtents --></div>	
    <!-- /#archive --></div>	
  

もう少し掘り下げて調べる必要がありそうですね...。