8

我有一个 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 和对话框调整大小，但无济于事。任何帮助将不胜感激。

4

7 回答 7

7

尝试

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

这对我有用！

于 2012-05-31T19:27:25.920 回答
6

这对我有用

$(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
  }
});
于 2013-02-15T18:31:43.367 回答
3

尝试： 

setTimeout(function(){
   $('#selector').scrollTop("0");
},100);
于 2013-01-29T07:02:30.693 回答
1

好的，所以我终于找到了一种破解方法来让它工作。虽然人们似乎可以使用 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");
});

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

于 2012-07-05T12:41:24.800 回答
1

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

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

高温高压

于 2013-02-13T03:07:04.933 回答
1

就我而言，我有#dialog modal:true，所以上述方法都不起作用。

我发现该body元素是实际滚动的，所以我做了以下操作，效果很好：

$( "#timeWindowDialog" ).dialog({
     autoOpen: false,
     modal: true,
     open : function() {
       $('body').scrollTop(0);
     }
});
于 2014-04-08T17:22:36.907 回答
0

将以下内容添加到打开的 dialog() 函数中效果很好（如果对话框过大，只会在对话框内滚动：

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

如果对话框在设置此处理程序之前自动打开，则可能不起作用。

于 2016-09-07T08:34:00.937 回答