Как получить диалог jQueryui scrollTop для прокрутки диалогового содержимого вверх

Question

У меня есть диалоговое окно jQueryui, которое я загружаю в большом количестве контента (условия соглашения об обслуживании), что вызывает полосу прокрутки в качестве переполнения содержимого. Это так, как я бы хотел. Тем не менее, я бы хотел, чтобы полоса прокрутки была наверху (так что пользователи могут читать с начала без прокрутки вверх) после открытия диалога. установка для диалога является

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

Я попытался с AutoOpen установить как на истинные и ложные, и я попытался все следующий код, чтобы попытаться получить содержимое, чтобы перейти к вершине:

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

К сожалению, ни одно из вышеперечисленных, похоже, не работает. Я также попытался помещать вышеперечисленное в связанных событиях в диалоговом окне как для диалога, так и для изменения диалога, но безрезультатно. Любая помощь будет принята с благодарностью.

Answer 1

Итак, я наконец нашел взломанный способ заставить это работать. Хотя кажется, что люди могут использовать scrollTop («0») и/или потенциально другие, ни одна из них не работала для меня. Если это относится и к вам, попробуйте следующее:

создать ссылку с nbsp; как его текст (поэтому он не будет выглядеть сразу как ссылка). Сделайте это первым HTML в области отображения диалогового окна, которое вы хотите отобразить (в моем случае это верхняя часть моих условий обслуживания, отображаемых в dailog).

Затем при объявлении диалога добавьте открытую функцию в качестве параметра и включите строки, чтобы размыть все ссылки внутри элемента, а затем установите фокус на ссылку вверху. Ниже приведен код инициализации, который работает для меня.

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

Надеется, что это помогает другим, как последний вариант, который не может получить стандартные методы работы по какому-либо причине первой.

Answer 2

Попробуйте

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

Это работает для меня!

Answer 3

Try:

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

Answer 4

У меня была такая же проблема, мой диалог JQuery-щ() будет открытым прокручивается в нижней части диалогового содержания. Мой коллега предположил, что это произошло потому, что в нижней части содержимого была кнопка/ссылка.

Я также обнаружил, что $("#dialog").scrollTop("0") не работает.

Я нашел эту страницу и попытался использовать prepend(), чтобы добавить ссылку на начало содержимого диалогового окна, а затем позвонить focus(). Это сработало, не используя blur() вообще в диалоговом окне open().

Ссылка, отображаемая визуально в левом верхнем углу диалогового окна как одно подчеркивание в IE10, которое мне было неинтересно.

Я обнаружил, что ссылка не требуется вообще. $("#dialog").focus() было достаточно, чтобы перейти в начало страницы. Это было протестировано в FireFox и IE10.

Решение:

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

НТН

Answer 5

это работает для меня

$(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

В моем случае, у меня есть #dialog modal:true, поэтому ни один из вышеперечисленных не работал.

Я обнаружил, что body элемент был то, что было на самом деле прокручивается, так что я сделал следующее, и она работает отлично:

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

Answer 7

добавив следующую строку в диалоге открытия() функция сделал очень хорошо работает (и только прокручивается внутри диалогового окна, если это слишком большой:.

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

это, возможно, не будет работать, если откроется диалоговое окно автоматизирован до этого обработчика установлена ​​