Colorboxのページ内リンクの高さの取得の複数設定

このページを参考にColorboxのインラインで呼び出したHTMLの中に
ボタンがあってそれを押すと、ページ内リンクする内容を元にページ制作を行っています。

デモーページ
https://www.tam-tam.co.jp/tipsnote/sample/kanke/150805/

このページのアンカーリンクで移動してからColorboxを閉じるその2のボタンを複数設置を
行いたいのですがモーダルの中のclose2のボタンをクリックするとモーダルが閉じて#anchor_demoのアンカーリンク設定箇所に飛びます。

このボタンの設定を複数14個ぐらい行いたいのですがこの記述方法だと最初の項目した
設定が出来ない為複数設定を行う時に記述方法をご教授いただきたいです。
宜しくお願いいたします。

<script>
	$(document).ready(function(){
		$('.close2').on('click', function(e){
			e.preventDefault();
			$.colorbox.close();
			var position = $('#anchor_demo').offset().top;
			window.scrollTo(0,position);
		});

	});
</script>

<div id="anchor_demo" class="section">
<h2>アンカーリンク設定箇所</h2>
</div>

<div id="inline05" style="width:300px;text-align:center;background:#eee;padding:50px;">
<p style="padding: 100px 30px 30px">ボタンでColorboxを閉じる</p>
<p class="btn"><a href="#anchor_demo" class="close2">移動してからColorboxを閉じる</a></p>
</div>

<div id="anchor_demo" class="section">
<h2>アンカーリンク設定箇所</h2>
</div>


<div style="display:none">
<div id="inline05" style="width:300px;text-align:center;background:#eee;padding:50px;">
<p style="padding: 100px 30px 30px">ボタンでColorboxを閉じる</p>
<p class="btn"><a href="#anchor_demo" class="close2">移動してからColorboxを閉じる</a></p>
</div>
</div>