2

I have many tabs and when click any tab, a vertical scrolling div is shown. Like facebook messages page: When click to any User's name. Dialog seems and scroll bar is on the bottom of div by default.

Here is tabs:

<ul class="companies">
    @foreach (var item in Model)
    {
       <li id='company_@(item.Id)' data-id='@item.Id' >
           <a>@item.Name</a>
       </li>
    }
</ul>

And content:

@foreach (var item in Model)
{
   <div id="scrollingDiv"  class="scrollingDiv"> @item.News </div>
}

And CSS:

.scrollingDiv {
    overflow-x: hidden;
    max-height: 500px;
    overflow-y: scroll;
}

I want to keep scroll bar on the bottom when click any tab. (To see always last news). Also current div. I checked this questions. But not worked in my application. How can I solve this issue?

Community
  • 1
  • 1
Jeyhun Rahimov
  • 3,769
  • 6
  • 47
  • 90
  • I think the $("#mydiv").scrollTop($("#mydiv")[0].scrollHeight); thing should work for you. How do you know you implemented this code correctly? – Gaurav Pandey Feb 15 '13 at 12:44
  • I checked that code by class name, not by id. $(".scrollingDiv").scrollTop($(".scrollingDiv")[0].scrollHeight); Nothing changed. – Jeyhun Rahimov Feb 15 '13 at 12:56

3 Answers3

4

With JavaScript, you can do something like

var d = document.getElementById('myDiv');

if(d.scrollHeight > d.clientHeight) {
  d.scrollTop = d.scrollHeight - d.clientHeight;
}

and execute this logic every time you add content to the div or when you want the scrollable container to scroll to the bottom.

marekful
  • 14,986
  • 6
  • 37
  • 59
2

jQuery's scrollTop() function might be just what you need. See http://api.jquery.com/scrollTop/

d4rkpr1nc3
  • 1,817
  • 13
  • 16
0

You can achieve it by using below code

$('.full-area').scrollTop($('.full-area')[0].scrollHeight);
Munni
  • 731
  • 5
  • 20