Anchor Iframe

**barrysss** · Feb 4, 2009, 04:55

I have a web page with an iframe that loads a series of thumbnails and when you click on a thumbnail it loads in the same iframe a larger image.

My problem is when you scroll down the page and hit one of the lower images it loads the image and will go to the top of the iframe but not the top containing page.

I have tried using named anchors but cannot get it to reference the containing page.

I would be grateful for some help.

**RyanReese** · Feb 4, 2009, 10:44

If you want to go to the top of the iframe'd page you can set an ID to the top of the page you are including.

<body>
<div id="top">

Then when you reference the iframe make the target URL "page.html#top"

Hope I helped.

**SoulScratch** · Feb 4, 2009, 11:00

Containing page:

Code:

<!doctype html>
<html>
    <head>
	<title></title>
	<style>
	    body { padding:700px 0 0; }
	</style>
    </head>

    <body id="hrm">

	<iframe src="frame.html" width="500" height="500"></iframe>

    </body>
</html>

Iframe:

Code:

<!doctype html>
<a href="#">click me!</a>
<script>
    var a = document.getElementsByTagName('a')[0];
    a.onclick = function() {
	parent.scrollTo(0,0);
    }
</script>

Should suffice methinks.

**liam_tmt7** · Feb 4, 2009, 15:06

SoulScratch, are you able to describe what the code does, as I am not following.

thanks
Liam

**RyanReese** · Feb 4, 2009, 15:55

It scrolls to the top of the iframe to the top left corner, aka giving the illusion of a freshly loaded page

**SoulScratch** · Feb 4, 2009, 16:15

Originally Posted by liam_tmt7

SoulScratch, are you able to describe what the code does, as I am not following.

thanks
Liam

The code in the frame is basically, an event handler is assigned to an anchor element so that when it is clicked, the referenced parent/containing page ( which contains the iframe ) scrolls to the far top and left, which I *think* is what the original poster wanted.

**barrysss** · Feb 5, 2009, 00:19

Thanks for your input SoulScratch however it takes me to the top of the iframe not the top of the containg page. Therefore you have to scroll up to see the page title. I guess because it is loading a second page into the iframe it is not picking up the containing page.

**SoulScratch** · Feb 5, 2009, 08:57

Originally Posted by barrysss

Thanks for your input SoulScratch however it takes me to the top of the iframe not the top of the containg page. Therefore you have to scroll up to see the page title. I guess because it is loading a second page into the iframe it is not picking up the containing page.

Using the JS I provided? Are any errors being thrown? Could you paste what you have tried to implement JS-wise?

The SitePoint Forums have moved.

User Tag List

Thread: Anchor Iframe

Thread Tools

Display

Anchor Iframe

Bookmarks

Bookmarks

Posting Permissions