使用jquery滾動到可滾動的pop div異常的頂部

Question

首先，我有一個彈出式div，其中包含一個表單

這是我的div

<div class="addnewrule" id="add_message_0">
       <form method="post" action="" id="frmadd">
        <input type="hidden" name="filter" value="1">
        <input name="rule_id" type="hidden" value="0">
      <table class="table-responsive" width="100%" border="0" cellspacing="0" cellpadding="10" id="" style="text-align:center; margin-top:0px;">
      <tr>
        <td colspan="2" align="left"><div id="display_msg_0"></div></td>
      </tr>
      <tr>
        <td width="40%" align="left">Name:</td>
        <td width="60%" align="left"><input class="input_field" name="rule_name" type="text"></td>
      </tr>
      <tr>
        <td align="left">Type:</td>
        <td align="center">
        <input type="radio" name="rule_type" value="0" style="display:none;"   />
        <input type="radio" name="rule_type" value="1" checked="checked" style="display:none;"  />
        <div class="btn-group equal_btn">
            <button id="block_click" class="btn btn-default" type="button" onclick="setRules(0);">Block Clicks</button>
            <button id="filter_click" class="btn btn-default active" type="button" onclick="setRules(1);">Filter Clicks</button>
          </div></td>
      </tr>
      <tr>
        <td align="left">Rule Active:</td>
        <td align="center">
        <input type="radio" id="active_0" name="active" value="1" checked="checked" style="display:none;"  />
        <input type="radio" id="inactive_0" name="active" value="0" style="display:none;" />
        <div class="btn-group">
            <button type="button" id="status_enb_0" class="btn btn-default active_btn active" onclick="setruleStatus(0,1);">Enable</button>
            <button type="button" id="status_dis_0" class="btn btn-default inactive_btn" onclick="setruleStatus(0,0);">Disable</button>
          </div></td>
      </tr>
      <tr>
        <td align="left">Campaign ID:</td>
        <td align="left"><input class="input_field" name="camp_id" type="text" /></td>
      </tr>
      <tr>
        <td align="left" id="rRange">Filter IP Ranges:</td>
        <td align="left"><table width="100%" border="0" cellspacing="0" cellpadding="0">
            <tr>
              <td style="padding:0;" width="45%"><input class="input_field" name="start_ip" type="text" /></td>
              <td width="10%" align="center">To</td>
              <td style="padding:0;" width="45%" align="right"><input class="input_field" name="end_ip" type="text" /></td>
            </tr>
          </table></td>
      </tr>
      <tr>
        <td align="left" id="rUAs">Filter users agents that contains:</td>
        <td align="left"><input class="input_field" name="user_agent" type="text" /></td>
      </tr>
      <tr>
        <td align="left" id="rRefs">Filter referers that contains:</td>
        <td align="left"><input class="input_field" name="referer" type="text" /></td>
      </tr>
      <tr id="rUrl" style="display:none;">
        <td align="left">Send Blocked Clicks to:</td>
        <td align="left"><input class="input_field" type="text" id="rule_url" name="rule_url" value="" /></td>
      </tr>
      <tr>
        <td align="left" colspan="2"><table class="copypaste" width="100%" border="0" cellspacing="0" cellpadding="0">
            <tr>
              <td><a href="javascript:void(0)" class="btn blue_button tab2" onclick="submitRule('frmadd',0);">Apply</a> <a href="javascript:void(0)" class="btn orange_button tab2" onclick="cancel_popup('add_new_rule')" >Cancel</a></td>
            </tr>
          </table></td>
      </tr>
    </table>
    </form>
    </div>

現在，這是下面給出的jquery ajax函數。它檢查驗證並在消息div中顯示驗證消息。

function submitRule(frmId,rule_id)
{
    var data=$('#'+frmId).serializeArray();
    $.ajax({
        type:'POST',
        url:'ajax/rule_update_process.php',
        data: data,
        dataType:'json',
        success:function(jData)
        {
            if(jData.status==1)
            {
                $("#display_msg_"+rule_id).html(jData.error);
                $("#display_msg_"+rule_id).addClass('error');
                var child_div = $("#display_msg_"+rule_id);
                var parent_div = $("#add_message_"+rule_id);
                parent_div.scrollTop(parent_div.scrollTop() + child_div.position().top);
            }
            else
            {
            window.location.href='settings_rules.php';
            }
        }
      });
}

由於彈出窗口是可滾動的div，因此我想滾動到頂部（僅在彈出div內），以便可以顯示帶有錯誤消息的消息div。

這就是我獲取屏幕的方式。

如果代碼滾動到彈出div的頂部以顯示錯誤消息div，我就使用了這段代碼，

但是這段代碼似乎不起作用。

我究竟做錯了什么？？

$("#display_msg_"+rule_id).html(jData.error);
$("#display_msg_"+rule_id).addClass('error');
var child_div = $("#display_msg_"+rule_id);
var parent_div = $("#add_message_"+rule_id);
parent_div.scrollTop(parent_div.scrollTop() + child_div.position().top);

Answer 1

用此parent_div.scrollTop（0,0）替換您的最后一行代碼；

Answer 2

我將建議一個非常簡單的方法：

$("#apply_button").click(function () { 
  var error_message = $("#your_error_message").css("display");

  if (error_message != "none") {
    $("#add_message_0").scrollTop(0);
  }; 
});

代碼不言自明。

BR

Answer 3

您只能使用css兄弟。 例如，這是您的表格。

<div>
<form class="has-error">
<p>error</p>
<input name="" value="">
</form>
<div>

您可以使用.has-error類設置CSS代碼。 您的CSS代碼僅在顯示錯誤消息時使用。

div{ overflow-y: scroll; }
div .has-error{ height: 400px; }

height將通過錯誤消息保護您當前的剖面高度。

在小提琴演示中是這樣的

如果在單擊按鈕時看不到該消息，請將其添加到單擊功能代碼中

$( '#add_message_1' ).delay( 200 ).animate({scrollTop: 0 }, 300);}