Have Geek Brain

How can I scroll an iframe from the inside using jquery?

I am using a shadowbox that generates an iframe to display product details on a page. Since the details page can be quite long, the client will need a More button that scrolls down the page (apparently the scrollbar to the right of the iframe is not enough).

Here is the code I tried to scroll the iframe:

$(document).ready(function()
{
$(".moreButton img").click(function() {
    scrollbottom();
});
});

function scrollbottom() {
var x = 250; // this number is a temporary placeholder
var t = 500;
$("iframe").animate({ scrollTop: x }, t);
}

I've also tried using body instead of iframe, to no avail. Any ideas? Thanks!

+2


a source to share


4 answers


This ended up working:



$('html,body').animate({ scrollTop: x }, t);
+1


a source


Example: (tested)



$("iframe").contents().children().animate({ scrollTop: x }, t);
+1


a source


In Chrome, I had to specifically select the body element:

$('#my-iframe').contents().find('body').animate({scrollTop:90},500);

+1


a source


Create a function in parent javascript like this:

function scrollToPoint(top) {
    $("html, body").animate({ scrollTop: top }, "slow")
}

and call this function in the iframe like this:

window.parent.scrollToPoint(top);

It should work in chrome and not be checked in firefox yet

+1


a source






More articles:


All Articles