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="panies">
    @foreach (var item in Model)
    {
       <li id='pany_@(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?

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="panies">
    @foreach (var item in Model)
    {
       <li id='pany_@(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?

• javascript
• jquery
• asp-mvc
• scroll
• scrollbar

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

3 Answers 3

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.

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

You can achieve it by using below code

$('.full-area').scrollTop($('.full-area')[0].scrollHeight);