2013-06-12 40 views
1

我試圖讓div滾動到div的底部。 div裏面是一個listview。每當頁面加載或點擊提交按鈕時,它應該滾動到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'的值:對象爲null或未定義。 搜索後,我發現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>  

回答

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'); 
}); 
+0

它仍然無法與該工作... – Kerieks

+0

你看到聊天div卷軸結束的div?或者用你使用的html和css代碼更新你的問題。 – yeyene

+0

#listDiv是你想要滾動到其div結束的那個。 – yeyene