【jQuery】colorboxの埋め込みhtmlが動かない

jQueryのcolorboxで埋め込みhtmlを使おうとしたら動かない。。

調べるとどうも、リンクが#付きになるため、スムーススクロールとバッティングしてしまうというのが原因だったよう。

元々読み込んでいるjsにスムーススクロール用の以下の記述があるのですが

$(function(){
  $('a[href^="#"]').click(function(){
    var speed = 500;
    var href= $(this).attr("href");
    var target = $(href == "#" || href == "" ? 'html' : href);
    var position = target.offset().top;
    $("html, body").animate({scrollTop:position}, speed, "swing");
    return false;
  });
});

a[href^=”#”]の部分が原因でした。ここに「colorboxで使うクラスのときは省いてね」という記述を追記します。
今回の場合はクラス inline_boxとします。

$(function(){
  $('a[href^="#"]:not(.inline_box)').click(function(){ //クラスinline_boxのときは省く
    var speed = 500;
    var href= $(this).attr("href");
    var target = $(href == "#" || href == "" ? 'html' : href);
    var position = target.offset().top;
    $("html, body").animate({scrollTop:position}, speed, "swing");
    return false;
  });
});

colorboxの方はこんな感じ

<script>
	$(function() {
		$(".inline_box").colorbox({
		inline: true
		});
	});
</script>
 
<a href="#inline_content" class="inline_box">埋め込みhtml</a>
 
<div style="display:none">
	<div id="inline_content">
		<p>だみーぶんしょうです</p>
	</div>
</div>

これで正常に動きました。