How to get jQueryui dialog scrollTop to scroll dialog content to top

Question

I have a jQueryui dialog which I'm loading in a lot of content (a terms of service agreement) which causes a scrollbar as the content overflows. This is as I would like it to be. However, I would like the scroll bar to be at the top (so users can read from beginnging without having to scroll up) once the dialog is open. the setup for the dialog is

$(function() 
{
$( "#tos_dialog" ).dialog({
    title: 'Terms Of Service Agreement',
autoOpen: true,
height: 480,
    width: 640,
modal: true,
    show: "blind",
hide: "explode",
    buttons: {
       "I Accept": function() {
        $( this ).dialog( "destroy" );
                $("#login_container").dialog( "destroy" );
                window.location.replace('/main.php');
    },
            "I Decline": function() {
                $( this ).dialog( "destroy" );
            }
        }
    });

I have tried with autoOpen set both to true and false, and I've tried all of the following code to try to get the content to scroll to the top is:

  $("#tos_dialog").show()
  $("#tos_dialog").scrollTop();
  $( ".ui-dialog" ).show();
  $( ".ui-dialog" ).scrollTop();
  $(".ui-widget-content").show();
  $(".ui-widget-content").scrollTop();
  $("body").scrollTop();
  $('#tos_dialog', window.parent.document).scrollTop(0);

Unfortunately none of the above seem to be working. I've also tried putting the above in bound events on the dialog both for dialogOpen and dialog resize with no avail. Any help would be greatly appreciated.

Answer 1

Try

$("#the_dialog_div").scrollTop("0")

This worked for me!