how to scroll to a specific div when a radio button is clicked/changed

Question

I am trying to scroll the page to "#Table_Details" using the scroll plug in. But i can't seem to get it working.

When i click/change the radio(.ModemsSelect) button the page scrolls to the location of the radio button i just clicked instead of scrolling down the page where my table("#table_Details") is located. I am not sure if i am doing this right or what is going on.

$(".ModemsSelect,.ServicesSelect").change(function (e) {
    var data = $("#" + this.value).serialize();
    var request = $.ajax({
        url: "classes/sCart.php?action=add",
        type: "POST",
        data: data,
        dataType: "html",
        radioButton: $(this).attr('class')
    });
    request.success(function (data) {
        //$(".in_cart").html("");//clear last item selected
        console.log("extra item added to cart");
        refreshCart();
        if (this.radioButton == "ModemsSelect") {
            $.scrollTo($('#Table_Details'));

            $("#icon_check_modem").html("");
            $("#icon_check_modem").html("<img src=\"../img/check_icon.png\">");
            $('.Modem_buttonNext').button("enable");
        } else if (this.radioButton == "ServicesSelect") {
            $("#icon_check_Installtype").html("");
            $("#icon_check_Installtype").html("<img src=\"../img/check_icon.png\">");
            $(".install_buttonNext").button("enable");
        } else {

        }
    });
});

Any help is appreciated. thank you.

Answer 1

working fiddle http://jsfiddle.net/ePstY/

You must replace this:

$.scrollTo($('#Table_Details'));

with this:

$('html, body').animate({scrollTop:$('#Table_Details').position().top}, 'slow');

Answer 2

Try doing it this

$('html, body').animate({
  scrollTop: $("#Table_Details").offset().top
}, 2000);

Instead of this:

$.scrollTo($('#Table_Details'));

I got the code from this article: SMOOTHLY SCROLL TO AN ELEMENT WITHOUT A JQUERY PLUGIN

Here's a working fiddle