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!

Answer 2

this is working for me

$(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" );
   }
  },
  open: function() {
    //Solution HERE
    $( ".ui-dialog-content" ).scrollTop(0);
    //End of Solution
  }
});

Answer 3

Try:

setTimeout(function(){
   $('#selector').scrollTop("0");
},100);

Answer 4

Ok, so I finally found a hacked way to get this to work. While it seems people can use scrollTop("0") and/or potentially others, none of these worked for me. If this is the case for you as well, try the following:

create a link with nbsp; as its text (so it won't look immediately like a link). Make this the first HTML in the display area of the dialog you wish to display (in my case it is the top of my terms of service displayed in the dailog).

Then when declaring the dialog, add the open function as a parameter and include lines to blur all links within the element and then to set the focus on the link at the top. Below is an initialization code that works for me.

$(function() {
    $( "#tos_dialog" ).dialog({
  title: 'Terms Of Service Agreement',
        autoOpen: false,
      height: 480,
  width: 640,
        modal: true,
    show: "blind",
        hide: "explode",
  open: function () 
  { 

    $('.ui-dialog-relative :link').blur();
    //setTimeout(function() { $('#tos_top').focus();}, 4000);
    $('#tos_top').focus();
  },
  focus: function(event, ui) {$('#tos_top').focus(); },
  buttons: {
            "I Accept": function() {
                $( this ).dialog( "destroy" );
      $("#login_container").dialog( "destroy" );
      window.location.replace('/nextpage.php');
            },
            "I Decline": function() {
                $( this ).dialog( "destroy" );
            }
        }
    });
    $( "#tos_dialog" ).dialog("open");
});

Hope this helps others as a last option who can't get the standard methods to work for whatever reason first.