私はこのHTMLマークアップを持っています:
<asp:Image ID="imgMap" runat="server" ImageUrl="/common/images/harita.jpg" class="map"
usemap="#Map" BorderWidth="0" />
<map name="Map" id="Map">
<area title="City1" shape="poly" coords="266,103" href="/dealer/186/Page.aspx#dealer1" />
<area title="City2" shape="poly" coords="255,222" href="/dealer/186/Page.aspx#dealer2" />
</map>
と
<div id="dealer1"></div>
<div id="dealer2"></div>
.
.
.
.
そして次のようなJavascriptコード:
<script type="text/javascript">
$(window).ready(function () {
var addressSection = "",
dealer = "",
eTop = "",
callbackAnimate = function () {
setTimeout(function () {
$(dealer).removeAttr("style").fadeIn();
}, 1000);
},
animateScroll = function () {
$('html, body').animate({ scrollTop: eTop }, 1000, function () {
$(dealer).effect("highlight", { color: "#fd9900" }, 500, callbackAnimate);
});
};
$('#Map').find('area').each(function (index, elArea) {
$(this).click(function () {
addressSection = $(this).attr('href').split('#');
dealer = "#" + addressSection[addressSection.length - 1];
eTop = $(dealer).offset().top;
animateScroll();
});
});
});
</script>
私が達成しようとしているのは、ユーザーが画像領域をクリックすると、ページがhref属性で指定されたリンクに移動し、ページの読み込み後に JavaScript コードを実行するため、ページがセクションdivにスクロールすることです。このコードでは、スクロール効果はページがロードされた後にのみ機能しますが、ユーザーが初めてマップをクリックしたときは機能しません。地図をクリックしてページを読み込んだ後にスクロールすることはできますか?