Jquery ui 如何让jQueryui对话框滚动顶部将对话框内容滚动到顶部

我有一个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和DialogResize，但没有效果。任何帮助都将不胜感激。

试试看

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

---

这对我有用

好的，所以我终于找到了一种黑客破解的方法来让它工作。虽然人们似乎可以使用scrollTop（“0”）和/或其他可能的工具，但这些工具对我来说都不管用。如果您也是这样，请尝试以下操作：

与nbsp建立联系；作为其文本（因此它不会立即看起来像链接）。使其成为您希望显示的对话框显示区域中的第一个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");
});

希望这能帮助其他人，作为最后一个选择，无论出于何种原因，无法首先使用标准方法。

尝试：

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

---

我也遇到了同样的问题，我的jQueryUIDialog（）会打开并滚动到对话框内容的底部。我的同事认为这是因为内容底部有一个按钮/链接

我还发现

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

var mydialog=$（“这里有一些非常长的内容，会溢出。”）；
$（“正文”）.append（mydialog）；
dialog（{open:function（event，ui）{
mydialog.focus（）；
}
});

这对我来说很有效

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

在我的例子中，我有
#对话框模态：true
，所以上面的任何一个都不起作用

我发现
body
元素实际上是滚动的，所以我做了以下操作，它工作得非常完美：

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

将以下内容添加到opening dialog（）函数中效果很好（如果对话框过大，则仅在对话框内滚动）：

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

如果在设置此处理程序之前自动打开对话框，则可能不起作用。
这不会提供问题的答案。若要评论作者或要求作者澄清，请在其帖子下方留下评论-您可以随时对自己的帖子发表评论，一旦有足够的评论，您就可以发表评论。您是否错过了此处的//解决方案$(“.ui dialog content”）.scrollTop（0）；//解决方案结束部分？它确实为我的问题提供了解决方案。我发现只需在对话框顶部放置一个锚点就足够了。然后就不需要模糊和聚焦。这对我在对话框设置中使用
modal:true，
很有效