Jump to content
westman

set scroll to the bottom of a div

Recommended Posts

I have many lines of text.

<div style="max-height:400px; overflow:scroll;">
many lines of text
</div>


How do I get my css to display a div at the bottom instead of the top of a scrollable div? 

Share this post


Link to post
Share on other sites

CSS can't do it, you will need to use Javascript to set the scrollTop property.

Share this post


Link to post
Share on other sites

I tried using

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


but with no luck

Share this post


Link to post
Share on other sites

If this code is below the element in question with exact ID value of 'mail_text', it should work.

Unless you are using a older IE "wish I worked as good as the other better browser's, but i know that will never happen" version, which used .pageYOffset

Edited by dsonesuk

Share this post


Link to post
Share on other sites
<div id="mail_text" class="mail_text" style="max-height:400px; overflow:auto;">
&nbsp;
</div>
<script type="text/javascript">
var objDiv = document.getElementById("mail_text");
objDiv.scrollTop = objDiv.scrollHeight;
</script>

I am using Chrome.
Is there a better peace to put my JS?
My example is not working. 

Edited by westman

Share this post


Link to post
Share on other sites

It works nicely in the link you posted but not for me.
I am also using this script to call in info to fill class="mail_text".

$( document ).ready(function() {
    $('.pmbutton').click(function(e) {
	$('.mail_text').load('scripts/message.php', { id : $(this).data('id'),id2 : $(this).data('id2') });
});
});


Could I somehow insert the code needed in here?

Share this post


Link to post
Share on other sites

Just to make it clear to some of those watching! This has everything to do with the code.

        <script>
            $(document).ready(function() {
                $('.pmbutton').click(function(e) {
                    $('.mail_text').load('scripts/message.php', {id: $(this).data('id'), id2: $(this).data('id2')},
                    function() {
                        var objDiv = document.getElementById("mail_text");
                        objDiv.scrollTop = objDiv.scrollHeight;

                    });
                });
            });

        </script>

 

Edited by dsonesuk
  • Like 1

Share this post


Link to post
Share on other sites

To make it clear on what is happening, the function within the load() is triggered after the content is loaded and load() function finished. That is why you didn't see the result you expected, the load() function was still in progress, when the scroll to top code was triggered.

  • Like 1

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×