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.

score 9 · Answer 1 · answered May 31 '12 at 19:27

9

Try

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

This worked for me!

answered May 31 '12 at 19:27

Nathan Friend

12,155
10
75
125

score 7 · Answer 2 · edited Jul 10 '20 at 09:01

7

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
  }
});

edited Jul 10 '20 at 09:01

Vesanen

387
1
5
13

answered Feb 15 '13 at 18:31

G3z

663
6
19

This does not provide an answer to the question. To critique or request clarification from an author, leave a comment below their post - you can always comment on your own posts, and once you have sufficient [reputation](http://stackoverflow.com/faq#reputation) you will be able to [comment on any post](http://stackoverflow.com/privileges/comment). – Roman C Feb 15 '13 at 18:49
2

did you miss the //Solution HERE $(".ui-dialog-content").scrollTop(0); //End of Solution part ? – G3z Nov 10 '14 at 09:13
it did provide solution to my problem. – Alp Aug 25 '16 at 13:25

score 4 · Answer 3 · edited Jan 29 '13 at 07:22

4

Try:

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

edited Jan 29 '13 at 07:22

Prasad Jadhav

5,090
16
62
80

answered Jan 29 '13 at 07:02

gaurav

91
3

This worked for me with `modal: true,` in my dialog settings – Jason Jan 18 '21 at 16:19

score 1 · Accepted Answer · answered Jul 05 '12 at 12:41

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.

I found that it's enough to just place an anchor at the top of the dialog. Then there was no need to blur and focus. — Fabian Knauf, Sep 08 '20 at 10:04

score 1 · Answer 5 · answered Feb 13 '13 at 03:07

I had this same issue, my jquery-ui dialog() would open scrolled to the bottom of the dialog content. My colleague suggested that this was because there was a button/link at the bottom of the content.

I also found that $("#dialog").scrollTop("0") would not work.

I found this page and tried using prepend() to add a link to the start of the dialog content and then call focus(). This worked, without using blur() at all in the dialog open() event.

The link displayed visually in the top left of the dialog as a single underline in IE10 which I did not care for.

I found that the link was not required at all. $("#dialog").focus() was sufficient to scroll to the top of the page. This was tested in FireFox and IE10.

Solution :

var mydialog = $("<div id='mydialog'>Here is some exceptionally long content which will overflow.</div>");
$("body").append(mydialog);
mydialog.dialog({open : function(event, ui) {
mydialog.focus();
}
});

HTH

score 1 · Answer 6 · answered Apr 08 '14 at 17:22

In my case, I have the #dialog modal:true, so none of the above worked.

I found that the body element was what was actually scrolled, so I did the following and it works perfectly:

$( "#timeWindowDialog" ).dialog({
     autoOpen: false,
     modal: true,
     open : function() {
       $('body').scrollTop(0);
     }
});

score 0 · Answer 7 · answered Sep 07 '16 at 08:34

adding the following to the opening dialog() function did work very well (and only scrolls inside the dialog if it is oversized:

$('#dialog-form').dialog({
    height: 500,
    width: 600,
    modal: false, // works with modal true and false
    open: function () 
        {
            $('#dialog-form').scrollTop(0);
        },

does maybe not work if the dialog opens automated before this handler is set.

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

7 Answers7