タブで開いてさらにタブ内をアンカーリンクで移動させたい

イメージマップを作成しています。
<area>タグをクリックすると他ページに移動ではなく、map下に.tabContentsの#place1が表示されるようになっています。
これにさらにタブ内で指定の場所にアンカーリンクで移動させたくてそちらの方法を探しています。
areaタグに他ページにダイレクトリンクをつける例はいくつかあったのですが、同一ページ内のタブにアンカーリンクで移動させる例は見当たらなく、どのようにしたらいいか困っています。
どうかご教授願います。

jsはareaを押すと内容が開くことだけ記述しています。

------------html------------

<div id="tab-area">
<img src="./img_add/place/imagemap_on.png" alt="" usemap="#shape1" id="shape1">
<map name="shape1">
<area shape="rect" coords="630,408,710,441" name="#place1" alt="東京" href="#TK">
<area shape="rect" coords="630,441,710,472" name="#place1" alt="神奈川" href="#KN">
<area shape="rect" coords="630,472,710,504" name="#place1" alt="埼玉" href="#ST">
<area shape="rect" coords="630,504,710,537" name="#place1" alt="千葉" href="#CB">
</map>
<div class="tabContents">
<div id="place1">
<h4 id="TK">東京</h4>
<div class="comment">...</div>
<h4 id="KN">神奈川</h4>
<div class="comment">...</div>
<h4 id="ST">埼玉</h4>
<div class="comment">...</div>
<h4 id="CB">千葉</h4>
<div class="comment">...</div>
</div>
</div>
</div>


------------js------------

$(function() {
$(document).on('click', '#tab-area area', function() {

$('#tab-area .tabContents > div').hide();
$($(this).attr('name')).show();

$('#tab-area area').removeClass('current');
$(this).addClass('current');

return false;
});


});

No.1 ベストアンサー 回答者： fujillin 回答日時： 2016/02/04 15:44

「30代・女性」ではありませんけれど・・・

え～～っと・・・
<div id="place1">～～</div>の部分が一つのタブを構成していて、これが複数存在するというふうになっているのでしょうか？
マップもそれに応じてname="#place2"やname="#place3"のものがあって、タブを表示し分けているということなのかな？

いずれにしろ、<area>タグのhref属性はページ内ジャンプでも機能するはずですので、これを生かしてあげればご希望のようになると思うのですが。
ということで、機能をキャンセルをしている
　return false;
をやめれば動作しませんか？

上記がうまくいかない場合は、area要素のhref属性を取得して、そのidを持つ要素に対して scrollIntoView() でも動作すると思います。
https://developer.mozilla.org/ja/docs/Web/API/El …