次のようなdivがあります。
<div id="ProductPriceWrap" class="ProductPriceWrap">
<div class="DetailRow RetailPrice" style="">
<span class="Label">MSRP:</span>
<strike>$249.00</strike>
<span class="YouSave" style=""> (You save <span class="YouSaveAmount">$174.00</span>)</span>
</div>
<div class="DetailRow PriceRow" style="">
<div class="Value">
<em id="ProductPrice" class="ProductPrice VariationProductPrice" style="color: black; ">$75.00</em>
</div>
</div>
</div>
そして、選択したオプションによって価格が変更されたことを顧客が確認できるように、次のスクリプトを作成しました。
$(document).ajaxSuccess(function(){
var currentPrice = $.trim($("#ProductPrice").text());
if(currentPrice == "%%GLOBAL_ProductPrice%%")
{
$("#ProductPrice").css('color','black');
$("#ProductPrice").removeClass("PriceChanged")
}
else
{
$("#ProductPrice").css('color','red');
$('html, body').animate({
scrollTop: $("#ProductPriceWrap").offset().top
}, 1000);
$("#ProductPriceWrap").animate({backgroundColor: "#ff0000" });
$("#ProductPriceWrap").animate({backgroundColor: "#ffffff" });
$( "#ProductPrice" ).addClass( "PriceChanged" );
}
});
</script>
スクロールする関数を #ProductPriceWrap に変更して、スクロールして渡された場合にのみその要素までスクロールするようにします。その要素が既に表示されている場合は、その要素までスクロールしないことを意味します。私は JS と JQ にかなり慣れていないので、どこから始めればよいかさえわかりません。どんな入力でも大歓迎です!ありがとう!