anchor to an iframe or html5 object

Question

I am trying to scroll to an element within an HTML5 object like so:

HTML with angular:

<a href="" ng-click="gotoAnchor(5)">SHOW ME</a>

This is the object I am using to pull in an html file locally.

<object type="text/html" data="sample.html" id="site-frame">

Inside sample.html, I have a div at the bottom of the page:

div id="anchor5" class="anchor">Anchor 5 of 5</div>

function within controller:

$scope.gotoAnchor = function(x) {
        var newHash = 'anchor' + x;
        if ($location.hash() !== newHash) {
          $location.hash('anchor' + x);
        } else {
          $anchorScroll();
        }
      };

if I place the anchor5 div outside of the object, it works, but not while inside the of the object. I am looking to go INTO the Object and scroll to the div. Any help would be awesome!

Try using [scrollIntoView()](https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView) — KAD, Jun 29 '15 at 21:43
Thanks for the scrollIntoView() link. I used it conjunction with another answer I found. — silksnare, Jun 30 '15 at 17:34

score 0 · Answer 1 · edited May 23 '17 at 11:43

Figured it out. Here is the code I used:

var goToLink = function(link){
    var element = document.getElementById('site-frame').contentWindow.document.getElementById(link)
    element.scrollIntoView({block: "end", behavior: "smooth"});
}

I was able to use the previous comment of scrollIntoView() using the options and this other answer - How to pick element inside iframe using document.getElementById

anchor to an iframe or html5 object

1 Answers1