如何獲取jQueryui對話框scrollTop將對話框內容滾動到頂部

我有一個jQueryUI對話框，我正在加載很多內容（服務條款的協議），導致滾動條作爲內容溢出。這是我希望的。但是，我希望滾動條位於頂部（這樣，一旦對話框打開，用戶就可以從頭開始閱讀而不必向上滾動）。在該對話框的設置是如何獲取jQueryui對話框scrollTop將對話框內容滾動到頂部

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

不幸的是，上述任何一個似乎都沒有奏效。我也試着把上面的對話框放在dialogOpen和對話框的對話框上，但是沒有用。任何幫助將不勝感激。

來源

2012-05-30 Ross

好的，所以我終於找到了一個黑客入侵的方法來實現這個工作。雖然看起來人們可以使用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"); 
});

希望這可以幫助別人作爲最後的選擇誰不能以任何理由首先工作的標準方法。

來源

2012-07-05 12:41:24 Ross

謝謝！爲我節省了一些時間 – sd1sd1

嘗試

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

這爲我工作！

來源

2012-05-31 19:27:25

不，對不起THI也沒有工作。 – Ross

嘗試：

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

來源

2013-01-29 07:02:30 gaurav

我有同樣的問題，我的jQuery UI的對話框（）將打開滾動到對話內容的底部。我的同事建議這是因爲內容底部有一個按鈕/鏈接。我也發現$("#dialog").scrollTop("0")不起作用。

我找到了這個頁面，並嘗試使用prepend（）添加一個鏈接到對話框內容的開頭，然後調用focus()。這工作，在對話框open()事件中根本不使用blur()。

在對話框的左上方以可視方式顯示的鏈接作爲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(); 
} 
});

HTH

來源

2013-02-13 03:07:04

，這是爲我工作

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

來源

2013-02-15 18:31:43 G3z

這並沒有提供問題的答案。要批評或要求作者澄清，在他們的帖子下留下評論 - 你可以隨時評論你自己的帖子，一旦你有足夠的[聲譽]（http://stackoverflow.com/faq#reputation），你將能夠[評論任何帖子]（http://stackoverflow.com/privileges/comment）。 –

你錯過了//解決方法HERE $（「。ui-dialog-content」）。scrollTop（0）; //解決方案部分結束？ – G3z

它確實爲我的問題提供瞭解決方案。 – alp

在我的情況，我有#dialog modal:true，所以沒有上述工作。

我發現body元素是什麼，實際上滾動，所以我做了以下和它完美的作品：

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

來源

2014-04-08 17:22:36 cml

加入以下在打開的對話框（）函數沒有很好地工作（且僅如果是超大的對話框內滾動：

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

也或許不是，如果設置此處理程序之前對話框打開自動工作

來源

2016-09-07 08:34:00

如何獲取jQueryui對話框scrollTop將對話框內容滾動到頂部

回答

相關問題