如何让 jQueryui 对话框 scrollTop 将对话框内容滚动到顶部答案

【问题标题】：How to get jQueryui dialog scrollTop to scroll dialog content to top如何让 jQueryui 对话框 scrollTop 将对话框内容滚动到顶部
【发布时间】：2012-05-30 12:26:36
【问题描述】：

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

【问题讨论】：

标签： jquery-ui jquery-ui-dialog scrolltop

【解决方案1】：

试试

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

这对我有用！

【讨论】：

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

【讨论】：

这没有提供问题的答案。要批评或要求作者澄清，请在他们的帖子下方发表评论 - 您可以随时评论自己的帖子，一旦您有足够的reputation，您就可以comment on any post。
你错过了 //Solution HERE $(".ui-dialog-content").scrollTop(0); //解决方案部分结束？
它确实为我的问题提供了解决方案。

【解决方案3】：

试试：

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

【讨论】：

在我的对话框设置中使用modal: true, 对我有用

【解决方案4】：

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

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

【讨论】：

我发现只需在对话框顶部放置一个锚点就足够了。然后就不需要模糊和聚焦了。

【解决方案5】：

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

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

【讨论】：

【解决方案6】：

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

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

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

【讨论】：

【解决方案7】：

将以下内容添加到打开的 dialog() 函数中效果非常好（并且只有在对话框过大时才会在对话框内滚动：

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

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

【讨论】：