如何在UpdatePanel中实现滚动条置底?

时间:2022-04-01 07:55:24
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title>律师审判厅</title>
<script type ="text/javascript" src="Common/JS/Users.js" ></script>
    <script language="javascript">
        function scrollerContent() {
            $.get("lblContent").scrollTop = $.get("lblContent").scrollHeight;
        }
    </script>
</head>
<body class="body1" onbeforeunload="scrollerContent()" OnLoad=""  background="App_Themes/Default/Images/12.jpg" >
<form id="form1" runat="server">
<asp:ScriptManager ID ="scm" runat="server">
    <Services>
     <asp:ServiceReference Path="~/Common/JS/Users.js" />
    </Services>
    </asp:ScriptManager>
<div>
        <table width="1000" border="0" cellspacing="0">
  <tr>
    <td>
<table width="1000px" height="100%" border="1" cellspacing="0" bordercolor="#7A6B28" class="ziti2">
      <tr class="ziti2">
        <td rowspan="14" align=left class="style8">
       <table width="830px" border="1" cellspacing="0">
          <tr background-color: #FFFFFF;>
            <td class="style11" background-color: #FFFFFF;>
         <asp:UpdatePanel ID="UpdatePanel1" runat="server">
            <ContentTemplate>
          <asp:Panel ID="Panel1" runat="server" Width="100%" Height="420px" ScrollBars="Auto" 
                             BackColor="White">
         <asp:Label ID="lblContent"  runat="server"></asp:Label>
         </asp:Panel>
         <asp:Timer ID="Timer1" runat="server" Interval="1000" OnTick="Timer1_Tick">
         </asp:Timer>
            </ContentTemplate>
            <Triggers>
                <asp:AsyncPostBackTrigger ControlID="Timer1" EventName="Tick" />
            </Triggers>
        </asp:UpdatePanel>
            </td>
          </tr>

          <tr>
            <td class="style10" align="left">
            <label>
       <table width=100%>
         <tr>
         <td>
             <asp:UpdatePanel ID="UpdatePanel7" runat="server" UpdateMode="Conditional">
                <ContentTemplate>
                    <asp:TextBox ID="txtSpeak" runat="server" Columns="93" Rows="5" class="f" 
                                    TextMode="MultiLine"></asp:TextBox>
               </ContentTemplate>
                <Triggers>
                    <asp:AsyncPostBackTrigger ControlID="btnSend" />
                </Triggers>
           </asp:UpdatePanel>
         </td>
         <td>
         <asp:UpdatePanel ID="UpdatePanel2" runat="server" UpdateMode="Conditional">
            <ContentTemplate>

                <asp:Button ID="btnSend" runat="server" Text="发言" class="f" onclick="btnSend_Click" />
           </ContentTemplate>
            <Triggers>
                <asp:AsyncPostBackTrigger ControlID="Timer1" EventName="Tick" />
            </Triggers>
       </asp:UpdatePanel>
         </td>
         </tr>
       </table>
            </label>
            </td>
          </tr>
        </table>
        </td>
        <td>
        <img src="App_Themes/Default/Images/faguan.jpg" />
        </td>
        <td>&nbsp;</td>
      </tr>
      <tr>
        <td colspan="2" align=left>法官</td>
      </tr>
      <tr>
        <td class="style7">
        <img src="App_Themes/Default/Images/shuji.jpg" width="38" height="38" />
        </td>
        <td>
        <label>
            <asp:RadioButton ID="rdbtnApply_s"  Visible="false" runat="server" 
                oncheckedchanged="rdbtnApply_s_CheckedChanged" />
             </label>
             <asp:LinkButton ID="lbt_s" runat="server" Visible="false">申请发言</asp:LinkButton>
           </td>
      </tr>
      <tr>
        <td colspan="2" align=left>书记</td>
      </tr>
      <tr>
        <td class="style7" >
        <img src="App_Themes/Default/Images/lawer.jpg" width="38" height="38" />
        </td>
        <td> 
        <label>
            <asp:UpdatePanel ID="UdtPnl2" runat="server">
               <ContentTemplate>
                <asp:RadioButton ID="rdbtnApply_Ylawer" Visible="false" runat="server" 
                oncheckedchanged="rdbtnApply_Ylawer_CheckedChanged" />
              </ContentTemplate>
           </asp:UpdatePanel>
             </label>
             <asp:LinkButton ID="lbt_Ylawer" runat="server" Visible="false" 
                onclick="lbt_Ylawer_Click">申请发言</asp:LinkButton>
           </td>
      </tr>
      <tr>
        <td colspan="2" align=left>原告律师</td>
      </tr>
      <tr>
        <td class="style7">
        <img src="App_Themes/Default/Images/yuangao.jpg" width="36" height="43" />
        </td>
        <td>
        <label>         
            <asp:UpdatePanel ID="UpdatePanel3" runat="server">
               <ContentTemplate>
                <asp:RadioButton ID="rdbtnApply_y"  Visible="false" runat="server" 
                oncheckedchanged="rdbtnApply_y_CheckedChanged" />
               </ContentTemplate>
            </asp:UpdatePanel>
             </label>
             <asp:LinkButton ID="lbt_y" runat="server" Visible="false" 
                onclick="lbt_y_Click">申请发言</asp:LinkButton>
        </td>
      </tr>
      <tr>
        <td colspan="2" align=left>原告</td>
      </tr>
      <tr>
        <td class="style7">
        <img src="App_Themes/Default/Images/lawer2.jpg" width="38" height="38" />
        </td>
        <td>
        <label>
            <asp:UpdatePanel ID="UpdatePanel4" runat="server">
              <ContentTemplate>
                <asp:RadioButton ID="rdbtnApply_Blawer"  Visible="false" runat="server" 
                oncheckedchanged="rdbtnApply_Blawer_CheckedChanged" />
              </ContentTemplate>
            </asp:UpdatePanel>
             </label>
             <asp:LinkButton ID="lbt_Blawer" runat="server" Visible="false" 
                onclick="lbt_Blawer_Click">申请发言</asp:LinkButton>
        </td>
      </tr>
      <tr>
        <td colspan="2" align=left>被告律师</td>
      </tr>
      <tr>
        <td class="style7" >
        <img src="App_Themes/Default/Images/beigao.jpg" width="37" height="37" />
        </td>
        <td>
       <label>
          <asp:UpdatePanel ID="UpdatePanel5" runat="server">
            <ContentTemplate>
                <asp:RadioButton ID="rdbtnApply_b"  Visible="false" runat="server" 
                oncheckedchanged="rdbtnApply_b_CheckedChanged" />
           </ContentTemplate>
          </asp:UpdatePanel>
             <%--<input type="radio" id="radApply_b" name="radApply" value="被告" visible="false" runat="server">--%>
       </label>
             <asp:LinkButton ID="lbt_b" runat="server" Visible="false" 
                onclick="lbt_b_Click">申请发言</asp:LinkButton>
        </td>
      </tr>
      <tr>
        <td colspan="2" align=left>被告</td>
      </tr>
      <tr>
        <td class="style7" >
        <img src="App_Themes/Default/Images/zhengren.jpg" width="34" height="49" />
        </td>
        <td>
        <label>
            <asp:UpdatePanel ID="UpdatePanel6" runat="server">
              <ContentTemplate>
               <asp:RadioButton ID="rdbtnApply_z"  Visible="false" runat="server" 
                oncheckedchanged="rdbtnApply_z_CheckedChanged" />
             </ContentTemplate>
            </asp:UpdatePanel>
             </label>
            <asp:LinkButton ID="lbt_z" runat="server" Visible="false" onclick="lbt_z_Click">申请发言</asp:LinkButton>
        </td>
      </tr>
      <tr align=left>
        <td colspan="2" align=left>
            证人
        </td>
      </tr>
    </table>
</td>
  </tr>
</table>
    </div>
    </form>
</body>
</html>

请教一下啊,需要实现的效果是滚动条始终置地。我按照如上写法调用脚本scrollerContent(),可结果是滚动条始终置顶!请问各位老师,有时间的话能帮我查阅下是什么地方写错了吗?我已经在需要滚动条更改的位置涂成红色!

6 个解决方案

#1


帮顶function scrollerContent() {
  $.get("lblContent").scrollTop = $.get("lblContent").scrollHeight;
  }
楼主设置的是label那个的滚动条吗?

#2


  function scrollerContent() {
  $.get("Panel1").scrollTop = $.get("Panel1").scrollHeight;
  }
改成Panel1也没用

#3


楼主头像太可爱了,呵呵。

scrollTop应该可以

#4


锚点定位试试

#5


=。=

为什么滚动条还是置顶~~

#6


使用锚点定位,比如以下例子
<body>  
    <form id="form1" runat="server">  
    <div>  
   <br />  
   <br />  
   <br />  
   我在这儿呢!<a name="anchorMarking"></a>  
        <asp:Button ID="Button1" runat="server" onclick="Button1_Click" Text="提交" />  
    </div>  
    </form>  
</body> 
//后台CS代码:
protected void Button1_Click(object sender, EventArgs e)   
    {   
        Response.Redirect("Default.aspx#anchorMarking");   
    }  
这样的效果只是当点击Button的时候,滚动条置底。我这个页面是类似聊天室功能,如果其他用户进入页面,他们看到的页面还是滚动条置顶

#1


帮顶function scrollerContent() {
  $.get("lblContent").scrollTop = $.get("lblContent").scrollHeight;
  }
楼主设置的是label那个的滚动条吗?

#2


  function scrollerContent() {
  $.get("Panel1").scrollTop = $.get("Panel1").scrollHeight;
  }
改成Panel1也没用

#3


楼主头像太可爱了,呵呵。

scrollTop应该可以

#4


锚点定位试试

#5


=。=

为什么滚动条还是置顶~~

#6


使用锚点定位,比如以下例子
<body>  
    <form id="form1" runat="server">  
    <div>  
   <br />  
   <br />  
   <br />  
   我在这儿呢!<a name="anchorMarking"></a>  
        <asp:Button ID="Button1" runat="server" onclick="Button1_Click" Text="提交" />  
    </div>  
    </form>  
</body> 
//后台CS代码:
protected void Button1_Click(object sender, EventArgs e)   
    {   
        Response.Redirect("Default.aspx#anchorMarking");   
    }  
这样的效果只是当点击Button的时候,滚动条置底。我这个页面是类似聊天室功能,如果其他用户进入页面,他们看到的页面还是滚动条置顶