Scroll to bottom of div?

Question

I am creating a chat using Ajax requests and I'm trying to get messages div to scroll to the bottom without much luck.

I am wrapping everything in this div:

#scroll {
    height:400px;
    overflow:scroll;
}

Is there a way to keep it scrolled to the bottom by default using JS?

Is there a way to keep it scrolled to the bottom after an ajax request?

Solution 1

Here's what I use on my site:

var objDiv = document.getElementById("your_div");
objDiv.scrollTop = objDiv.scrollHeight;

Solution 2

This is much easier if you're using jQuery scrollTop:

$("#mydiv").scrollTop($("#mydiv")[0].scrollHeight);

Solution 3

Try the code below:

const scrollToBottom = (id) => {
    const element = document.getElementById(id);
    element.scrollTop = element.scrollHeight;
}

You can also use Jquery to make the scroll smooth:

const scrollSmoothlyToBottom = (id) => {
    const element = $(`#${id}`);
    element.animate({
        scrollTop: element.prop("scrollHeight")
    }, 500);
}

Here is the demo

Here's how it works:

Ref: scrollTop, scrollHeight, clientHeight

Solution 4

using jQuery animate:

$('#DebugContainer').stop().animate({
  scrollTop: $('#DebugContainer')[0].scrollHeight
}, 800);

Solution 5

Newer method that works on all current browsers:

this.scrollIntoView(false);

View more solutions

Comments

[jondinham]

is this method ok with all browsers?

[Jimmy Bosse]

you need [0] to get dom element from jquery element to get scrollHeight

[Sean]

@PaulDinh: I just looked into this and there is an issue with IE7 and lower using scrollHeight. There does seem to be a work around for IE7 here.

[kalyfe]

Notice how this answer uses .stop(), which prevents issues with multiple animations.

[Eric]

Without repeating yourself: $("#mydiv").scrollTop(function() { return this.scrollHeight; });

[Irfan Yusanif]

how to get dynamic id? like in <div class="abc"><div data-bind=attr : {'id': myId } ></div></div> In this code myId is a variable. How can I access this id in script.

[Benkinass]

I'm not quite sure I understand your question. In my example, "myId" is the id of the scroll container. Do you want to create more than one area where the user can scroll ?

[SStanley]

I suspect $scope.$apply(callback) would work as well as this forces a digest and re-evaluation of the view.

[Wayferer]

Thank you! I was really wondering why I couldn't get it to work and the $timeout was the issue.

[aiven]

why not scrollTopMax instead of scrollHeight?

[john ktejik]

This isn't working when I dynamically add images :(

[Mahdi Bagheri]

change scrollTopMax to var maxScrollTop = element[0].scrollHeight - element.outerHeight();

[KingRider]

@Wayferer same setTimeout(function() { ... }, n)

[MichielB]

The 'modern' way is to use Element.scrollIntoView() -- developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoV‌​iew

[rbansal]

This should be the accepted answer as the older methods do not work anymore

[mplungjan]

That would be the case if "this" is something in the div that can be scrolled to

[defend orca]

this is really right answer, the pic is really useful

[Lucas Breitembach]

can you use var element = document.getElementById("elementToSelect"); element.scrollIntoView();

[Anjali Sharma]

with setTimeout(), its working fine. Worked with angular 9. Saved my day.

[ngShravil.py]

Happy to help :)

[Evgeniy Boytsov]

looks like a hack. what does the 1000000 number mean?

[Richard Tyler Miles]

This didn't work for me, If you have query use @andsien.. Note an alternative animate can have unedited behavior with the scroll bar locking in safari <= 14.0.1 (latest)

[Gil Epshtain]

The method scrollIntoView is triggered on a child element inside a parent container. So how to use it to: scroll parent to bottom (as asked in the original question).

[giovannipds]

You can use scrollIntoView({ behavior: "smooth", block: "end" });

[Akira Yamamoto]

See which browsers are supported here caniuse.com/?search=scrollIntoView

[Kayote]

Great answer, tested and working well. Thank you.

[Cybernetic]

This scrolls the whole page, not the targeted element (chrome)