iframe の親のリンクで子のアンカーリンクへスクロールする

iframe の親にあるリンクをクリックすると、 iframe 内がアンカーリンクへスクロールします。

実際の表示

コード

HTML

<iframe id="if1" src="/cmp/parts/iframe-link/iframe-child.html"></iframe>
<div id="link">
  <ul class="if-link">
    <li><a href="#p1"  target-iframe="if1">#p1</a></li>
    <li><a href="#p2"  target-iframe="if1">#p2</a></li>
    <li><a href="#p3"  target-iframe="if1">#p3</a></li>
    ・
    ・
    ・
</div>

CSS

#if1 {
  width: 100%;
  height: 300px;
}
#link::after {
  clear: both;
  content: "";
  display: block;
  line-height: 0;
}
.if-link {
  float: left;
  list-style: none;
}
.if-link + .if-link {
  margin-left: 40px;
}

JavaScript

$(function() {
  $('.if-link').on('click', 'a', function(event) {
    event.preventDefault()
    var target = $(this).attr('target-iframe')
    var href = $(this).attr('href').slice(1)
    var content = $('#' + target).contents()
    $('html, body', content).animate({scrollTop: content.find('[name=' + href + ']').offset().top}, 300)
  })
})

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です