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.

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.

• javascript
• jquery

Share Improve this question Follow edited Oct 7, 2013 at 16:08 Tushar Gupta - curioustushar 57.1k2424 gold badges106106 silver badges109109 bronze badges asked Oct 7, 2013 at 16:03 zeid10zeid10 52188 silver badges3030 bronze badges 1

• You should wait to scroll until you're done modifying the page's html. You're starting the scrollTo call, and jQuery calculates the position it needs to scroll into view. Then, you change the page layout with calls to html(), but jQuery already started the scroll movement. So, it doesn't wind up in the right place. My suggestion is to move that scrollTo call to the end, and wrap it in a setTimeout with like 500ms delay. – Chris Baker Commented Oct 7, 2013 at 16:06

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

working fiddle http://jsfiddle/ePstY/

You must replace this:

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

with this:

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

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