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设置为true和false，并且我尝试了以下所有代码以尝试将内容滚动到顶部：

  $("#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和对话框调整大小都无济于事。任何帮助将不胜感激。

Answer 1

尝试

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

这对我有用！

Answer 2

这对我有用

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

尝试：

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

Answer 4

好的，所以我终于找到了一种破解方式让它发挥作用。虽然看起来人们可以使用scrollTop（“0”）和/或其他可能，但这些都不适用于我。如果您也是这种情况，请尝试以下方法：

创建链接作为它的文本（因此它不会像链接那样立即看起来）。将此设置为您希望显示的对话框的显示区域中的第一个HTML（在我的情况下，它是我在dailog中显示的服务条款的顶部）。

然后在声明对话框时，将open函数添加为参数，并包含用于模糊元素中所有链接的行，然后将焦点设置在顶部的链接上。下面是一个适用于我的初始化代码。

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

我有同样的问题，我的jquery-ui对话框（）会打开滚动到对话框内容的底部。我的同事建议这是因为内容底部有一个按钮/链接。

我还发现$("#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();
}
});

HTH

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

如果在设置此处理程序之前对话框自动打开，

可能不起作用。

如何获取jQueryui对话框scrollTop将对话框内容滚动到顶部

7 个答案: