Come ottenere la finestra di dialogo jQueryui scrollTop per scorrere il contenuto della finestra di dialogo in alto

Question

Ho una finestra di dialogo jQueryui che sto caricando in molti contenuti (un contratto di servizio) che causa una barra di scorrimento quando il contenuto fuoriesce. Questo è come vorrei che fosse. Tuttavia, vorrei che la barra di scorrimento fosse in cima (in modo che gli utenti possano leggere dall'inizio senza dover scorrere verso l'alto) una volta aperta la finestra di dialogo. l'impostazione per la finestra di dialogo è

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

Ho provato con AutoOpen impostato sia al vero e falso, e ho provato tutto il codice riportato di seguito per cercare di ottenere il contenuto per scorrere verso l'alto è:

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

Sfortunatamente nessuna di queste sembra funzionare. Ho anche provato a mettere gli eventi sopra elencati nella finestra di dialogo sia per dialogOpen che per ridimensionare le finestre senza alcun risultato. Qualsiasi aiuto sarebbe molto apprezzato.

Answer 1

Ok, quindi ho finalmente trovato un modo compromesso per farlo funzionare. Mentre sembra che le persone possano usare scrollTop ("0") e/o potenzialmente altri, nessuno di questi ha funzionato per me. Se questo è il tuo caso, prova quanto segue:

creare un collegamento con nbsp; come il suo testo (quindi non apparirà immediatamente come un link). Rendi questo il primo codice HTML nell'area di visualizzazione della finestra di dialogo che desideri visualizzare (nel mio caso è la parte superiore dei miei termini di servizio visualizzati nel dailog).

Quindi, quando si dichiara la finestra di dialogo, aggiungere la funzione aperta come parametro e includere le linee per sfocare tutti i collegamenti all'interno dell'elemento e quindi impostare lo stato attivo sul collegamento nella parte superiore. Di seguito è riportato un codice di inizializzazione che funziona per 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"); 
}); 

Spero che questo aiuti gli altri come ultima opzione che non può ottenere i metodi standard per funzionare per qualsiasi ragione prima.

Answer 2

Prova

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

Questo ha funzionato per me!

Answer 3

Prova:

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

Answer 4

Ho avuto questo stesso problema, il mio dialogo jQuery-ui() avrebbe aperto scorrere alla parte inferiore della finestra di dialogo contenuti. Il mio collega ha suggerito che questo era perché c'era un pulsante/link nella parte inferiore del contenuto.

Ho anche trovato che $("#dialog").scrollTop("0") non funzionava.

Ho trovato questa pagina e ho provato a usare prepend() per aggiungere un collegamento all'inizio del contenuto della finestra di dialogo e quindi chiamare focus(). Questo ha funzionato, senza utilizzare blur() nella finestra di dialogo evento open().

Il collegamento visualizzato visivamente in alto a sinistra nella finestra di dialogo come una sottolineatura singola in IE10 di cui non mi importava.

Ho trovato che il collegamento non era affatto richiesto. $("#dialog").focus() era sufficiente per scorrere fino alla parte superiore della pagina. Questo è stato testato in FireFox e IE10.

Soluzione:

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

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

Answer 6

Nel mio caso, ho la #dialog modal:true, in modo da nessuna delle precedenti ha funzionato.

Ho trovato che l'elemento body è stato quello che è stato effettivamente fatto scorrere, così ho fatto quanto segue e funziona perfettamente:

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

Answer 7

aggiungendo quanto segue alla finestra di apertura() la funzione ha funzionato molto bene (e solo scorre all'interno della finestra di dialogo se si tratta di grandi dimensioni:.

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

fa forse non funzionano se il dialogo si apre automatizzato prima di questo gestore è impostato