JQUERY

Question

我正在尝试将div滚动到div的底部。 div里面是listview。每当加载页面或单击提交按钮时，它都应滚动到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'的值：object为null或undefined。搜索后我发现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>

Answer 1

点击此处DEMO http://jsfiddle.net/yeyene/6gAHT/

JQUERY

$(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');
});

滚动到div的底部不起作用或给出错误

1 个答案:

JQUERY