js/jquery scrolling to bottom of div when the page is loaded (IE problem)

Question

My codes works perfectly on Firefox. It works on IE when the content of the div is less, it fail to scroll to bottom when the content of div is too high in IE. Button click to s

Answer 1

Try making the call to asd() after the DOM has been loaded. I know putting it at the bottom of the page should do this, but it cannot be relied on.

<script src="javascripts/jquery-1.5.js" type="text/javascript" language="javascript"></script>    
<script type="text/javascript">
    function asd(){
        var d = document.getElementById('div');
        d.scrollTop = d.scrollHeight;
    }

    $(function() {
        asd(); // scroll div on load
        $("#button".click(function() {
            asd(); // scroll div on click
        });
    });
</script>

<button id="button">scroll-div</button>

<div id='div' style=' overflow:scroll; height:300px; width:200px; border:1px solid blue; background:blue;'>
        <p>asdasdas</p><p>asdasdas</p><p>asdasdas</p>
        <p>asdasdas</p><p>asdasdas</p><p>asdasdas</p>
        <p>asdasdas</p><p>asdasdas</p><p>asdasdas</p>
        <p>asdasdas</p><p>asdasdas</p><p>asdasdas</p>
        <p>asdasdas</p><p>asdasdas</p><p>asdasdas</p>
        <p>asdasdas</p><p>asdasdas</p>
        <p>asdasdas</p><p>asdasdas</p>
        <p>asdasdas</p><p>asdasdas</p>
        <p>asdasdas</p><p>asdasdas</p>
        <p>asdasdas</p><p>asdasdas</p>
</div>

Answer 2

Wait until the document is loaded:

$(document).ready(function(){asd();});

Putting an instruction somewhere at the end of the document doesn't be the same like waiting for the ready-event.