CODEWITHSUNDEEP
javascriptiframescroll
Ruth Edmondson
Ruth Edmondson

Reputation: 41

scroll parent window to anchor in iframe

Parent and iframe are on the same domain. Iframe has dynamic height and no scrollbars of its own - scrollbars are on the parent window.

Despite much searching, I can't find a way of scrolling the parent window to an anchor in the iframe on loading. ie the iframe url is abc.com/iframe.html#link, but on loading only the top of the iframe is visible - the parent frame doesn't scroll to #link. Does anyone know of a way this can be done with javascript (in either the parent or the iframe or both) or otherwise?

Thanks

Upvotes: 4

Views: 3475

Answers (3)

sp42
sp42

Reputation: 1

Try this

onscroll = (event) => {
    event.stopPropagation();
    event.preventDefault();

    window.scrollTo(0, 0); // scroll parent window to anchor in iframe
    return false;
};

Upvotes: -1

huhuh
huhuh

Reputation: 31

Did you try urlencoding the #?

Try: %23

Upvotes: 0

ppsreejith
ppsreejith

Reputation: 3438

This can be done though javascript.Suppose you click on a link, instead of anchor linking it, try this: 

document.getElementById('id_of_link').scrollIntoView(true);

Edit: What about window.parent.scroll(x,y) where x,y are the positions of the elements retrieved through this method: 

function getOffset( el ) {
    var _x = 0;
    var _y = 0;
    while( el && !isNaN( el.offsetLeft ) && !isNaN( el.offsetTop ) ) {
        _x += el.offsetLeft - el.scrollLeft;
        _y += el.offsetTop - el.scrollTop;
        el = el.offsetParent;
    }
    return { top: _y, left: _x };
}
var x = getOffset( document.getElementById('yourElId') ).left;

From: Retrieve the position (X,Y) of an HTML element

Upvotes: 2

Related Questions