How to scroll an iframe to the bottom when page lo

Question

I was like on every question about this on the net, tried like 50 diff methods, first i tried to scroll the div - then when its not worked i've tried to iframe the file with the div and scroll the iframe.. nothing just works!

Look on the last script i have set up:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var t = 100; //arbitrary time in ms
$("#frame").animate({ scrollTop: $("#frame").height()}, t);
});
</script>

<center><iframe id="frame" src="xxx.php" frameborder="0" width="630px" height="500px"></iframe></center>

I tried both #frame and frame without the (#), both with (document).ready and without it. Nothing seems to work on the page and its driving me nutz.

Thanks. :)

Answer 1

If you have access to the source code of the iframe contents, one easy trick is to add an <a name='end'>&nbsp; (or the last line of your content)</a> (not sure if you really need anything in the <a> tag).

Add #end to the iframe source, e.g.

http://www.yourdomain.com/file.php#end

and it will automatically scroll to the end, no javascript/jquery required

Answer 2

With jQuery you need to use .contents() to access whatever's inside the iframe. You also need to use either the window load event, or the iframe's document ready event.

$(window).load(function ()
{
    var $contents = $('#frame').contents();
    $contents.scrollTop($contents.height());
});

Demo: http://jsbin.com/ujuci5/2

---

I would recommend going back to the div structure you mentioned, since it sounds like what you're trying to do doesn't require an iframe. You'll find that it's a lot less headache to work with a div than an iframe.

$(function ()
{
  var $mydiv = $('#mydiv');
  $mydiv.scrollTop($mydiv.height());
});

Demo: http://jsbin.com/ujusa4/2

---

how can i launch the scroll function like 3 seconds after the page loads?

Use setTimeout.

$(window).load(function ()
{
    setTimeout(function ()
    {
        var $contents = $('#frame').contents();
        $contents.scrollTop($contents.height());
    }, 3000); // ms = 3 sec
});

Answer 3

If the current document is ready, this means that the DOM is ready, but the document inside the iframe has to be loaded too.

<script type="text/javascript">
$(document).ready(function() {
  $("#frame").load(function(){this.contentWindow.scrollBy(0,100000)});
});
</script>