javascript - Jquery 仅在不可见时滚动到元素

Question

我有一个看起来像这样的 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 还很陌生，甚至不知道从哪里开始。非常感谢任何输入！谢谢！

Answer 1

似乎您正在寻找选择器:visible和功能.animate()。

最后你会得到类似的东西：

if ($("#ProductPriceWrap:not(:visible)")) {
  $("html, body").animate({
    scrollTop: $("#ProductPriceWrap").offset().top
  }, 1000);
}