Cómo obtener el diálogo jQueryui scrollTop para desplazar el contenido del diálogo a la parte superior

Question

Tengo un cuadro de diálogo jQueryui que estoy cargando en un montón de contenido (términos de acuerdo de servicio) que causa una barra de desplazamiento a medida que el contenido se desborda. Esto es lo que me gustaría que fuera. Sin embargo, me gustaría que la barra de desplazamiento esté en la parte superior (para que los usuarios puedan leer desde el principio sin tener que desplazarse hacia arriba) una vez que el cuadro de diálogo esté abierto. la configuración para el diálogo es

$(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"); 
      } 
     } 
    }); 

He tratado con Autoopen ajustado tanto a verdadero y falso, y lo he intentado todo el código siguiente para tratar de conseguir el contenido para desplazarse hasta la parte superior es:

$("#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); 

Desafortunadamente ninguno de los anteriores parece estar funcionando. También intenté poner lo anterior en eventos enlazados en el cuadro de diálogo tanto para dialogOpen como para cambiar el tamaño del cuadro de diálogo sin éxito. Cualquier ayuda sería muy apreciada.

Answer 1

Ok, así que finalmente encontré una forma pirateada para hacer que esto funcione. Si bien parece que las personas pueden usar scrollTop ("0") y/o potencialmente otros, ninguno de estos funcionó para mí. Si este es el caso para usted también, intente lo siguiente:

crear un enlace con nbsp; como su texto (por lo que no se verá inmediatamente como un enlace). Haga que este sea el primer HTML en el área de visualización del diálogo que desea visualizar (en mi caso, es la parte superior de mis términos de servicio que se muestran en el dailog).

Luego, al declarar el diálogo, agregue la función abierta como un parámetro e incluya líneas para desenfocar todos los enlaces dentro del elemento y luego establecer el foco en el enlace en la parte superior. Debajo hay un código de inicialización que funciona para mí.

$(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"); 
}); 

Espero que esto ayude a los demás como una última opción que no puede obtener los métodos estándar para trabajar por cualquier razón primero.

Answer 2

Trate

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

Esto funcionó para mí!

Answer 3

Probar:

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

Answer 4

tenía este mismo problema, mi diálogo jquery-ui() abriría desplazado hasta la parte inferior del contenido de diálogo. Mi colega sugirió que esto se debía a que había un botón/enlace en la parte inferior del contenido.

También encontré que $("#dialog").scrollTop("0") no funcionaría.

Encontré esta página y traté de usar prepend() para agregar un enlace al comienzo del contenido del diálogo y luego llamar al focus(). Esto funcionó, sin usar blur() en absoluto en el evento de diálogo open().

El enlace se muestra visualmente en la parte superior izquierda del cuadro de diálogo como un subrayado único en IE10 que no me interesó.

Encontré que el enlace no era necesario en absoluto. $("#dialog").focus() fue suficiente para desplazarse a la parte superior de la página. Esto fue probado en Firefox e IE10.

Solución:

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

Answer 5

esto está funcionando para mí

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

Answer 6

En mi caso, tengo el #dialog modal:true, por lo que ninguna de las anteriores trabajé.

me encontré con que el elemento body fue lo que en realidad estaba desplazado, así que hizo lo siguiente y funciona perfectamente:

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

Answer 7

añadiendo lo siguiente en el cuadro de diálogo de apertura() la función funcionaba muy bien (y sólo se desplaza en el interior del cuadro de diálogo si es de gran tamaño:.

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

hace quizá no funcionan si el diálogo se abre automatizado antes de ajustar este controlador