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)
})
})

コメントを残す

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