如何获取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将对话框内容滚动到顶部

回答

相关问题