How to scroll iframe at the bottom of the page when loading the page?

Question

I was like every question about this on the net, tried as many as 50 diff methods, first I tried to scroll through the div - then when it didn't work, I tried the iframe file with the div and scroll through the iframe. nothing works!

Take a look at the last script I installed:

<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 # frames and frames without (#), both with (document) .ready and without it. Nothing seems to work on the page, and that makes me wonder.

Thanks.:)

Answer 1

With jQuery, you need to use .contents() to access what is inside the iframe. You also need to use a window load event or an iframe document ready event.

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

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

---

I would recommend reverting to the div structure you were talking about, as this is similar to what you are trying to do, does not require an iframe. You will find that there is much less headache for working with divs than iframes.

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

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

---

how can I start 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 2

If you have access to the source code of the iframe content, one simple trick is to add <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, for example.

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

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

Answer 3

If the current document is ready, this means that the DOM is ready, but the document inside the iframe must also be loaded.

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