1

我正在尝试让 div 滚动到 div 的底部。div 里面是一个列表视图。每当加载页面或单击提交按钮时，它应该滚动到 div 的底部。我尝试了几种方法，但无法使其正常工作。

这些是我使用的方法：

    function scrollPanelToBottom() {
       var div = document.getElementById("divChat")
       div.scrollTop($("#divChat")[0].scrollHeight - div.height());
       $("#pnlChat").scrollTop() 
     var div = document.getElementsByName(divChat);
     div.scrollTop = div.scrollHeight;
    }
    $(document).ready(function () {
        var psconsole = $('#divChat');
        psconsole.scrollTop($("#divChat")[0].scrollHeight - psconsole.height()
        );
    });

没有错误，但没有滚动：

    $('#divChat').scrollTop($('#divChat').height())
    $("#divChat").animate({ scrollTop: $('#divChat').height() }, 100);
    $("#divChat").animate({ scrollTop: $('#divChat')[0].scrollHeight }, 1000);
    $('#divChat').scrollTop($('#divChat')[0].scrollHeight);

    $(window).load(function () {
        $('#divChat').animate({ scrollTop: $('#divChat').height() }, 1000);
    });

    $('#divChat').scrollTop($('#divChat').prop("scrollHeight"));
    $('#divChat').scrollTop($('#divChat')[0].scrollHeight);
    $('#divChat').scrollTop($('#divChat').val("scrollHeight"));

每当我使用 scrollHeight 属性时，它都会给我一个错误：Microsoft JScript 运行时错误：无法获取属性“scrollHeight”的值：对象为空或未定义。搜索后我发现 scrollTop 用于实现这一点，我仍然无法让它滚动......有没有其他方法可以实现这一点，或者有人可以告诉我我做错了什么......这是我第一次使用 jquery，所以我希望它不是一点点....

    <div id="divChat" style="overflow-x:auto; overflow-y:auto; width:100%; height:100px; min-height:100px;  max-height:100px; background-color:#d0d0d0; word-break:break-all;" runat="server">  
           <%--<asp:Panel ID="pnlChat" style="overflow-x:auto; overflow-y:auto; width:100%; height:100px; min-height:100px; max-height:100px; background-color:#d0d0d0; word-break:break-all;" runat="server" ScrollBars="Horizontal">--%>
          <div id="listDiv">
            <asp:ListView ID="lvChat" runat="server">
        <LayoutTemplate>
            <div id="itemPlaceholder" runat="server" />
        </LayoutTemplate>
        <ItemTemplate>
             <div>            
                     <asp:Label ID="lblUser" runat="server" Text='<%#Eval("Username") %>' style ="color:blue" Font-Bold="true" CssClass="ltrTitle" ></asp:Label>
                     <asp:Label ID="Label1" runat="server" Text=" Said: " CssClass="ltrTitle" Font-Bold="true" ></asp:Label>
                     <asp:Label ID="lblMessage" runat="server" Text='<%#Eval("Message") %>' CssClass="ltrTitle"></asp:Label>
             </div>
        </ItemTemplate>
             <AlternatingItemTemplate>
                            <div style="background-color:#EFEFEF">
                               <asp:Label runat="server" style ="color:green" Font-Bold="true" ID="Label1"><%#Eval("Username") %></asp:Label>
                                <asp:Label ID="Label2" runat="server" Text=" Said: " Font-Bold="true"></asp:Label>
                               <asp:Label runat="server" ID="Label6"><%#Eval("Message") %></asp:Label>
                            </div>
        </AlternatingItemTemplate>   
    </asp:ListView>
   <%-- </asp:Panel>--%>
              </div>
  </div>
4

1 回答 1

1

在这里查看演示http://jsfiddle.net/yeyene/6gAHT/

查询

$(document).ready(function(){
    var divTop = $('#listDiv').height();
    // scroll chat div
    $('#divChat').stop().animate({"top": divTop }, 500, "swing");
    // screen follow chat div
    $('html, body').animate({ scrollTop: divTop }, 'slow');
});
于 2013-06-12T10:10:41.873 回答