0

I have a div that looks like this:

<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>

And I made this script to help customers see when the option chosen has changed the price: 

$(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>​

I want to change the function that scrolls to #ProductPriceWrap so that it will only scroll to that element if they have scrolled passed it. Meaning don't scroll to that element if it is already visible. I am pretty new to JS and JQ, and don't even know where to start on this one. Any input is greatly appreciated! Thanks!

user2687646
  • 264
  • 1
  • 5
  • 12
  • I think this is what you are after: http://stackoverflow.com/questions/5685589/scroll-to-element-only-if-not-in-view-jquery – Kyle Muir Sep 25 '13 at 23:19

1 Answers1

-1

Seems you are looking for selector :visible and function .animate().

At the end you will have something like:

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