www.webdeveloper.com
Results 1 to 8 of 8

Thread: Make webpage jump to top when link inside iframe is clicked

  1. #1
    Join Date
    May 2005
    Posts
    34

    Make webpage jump to top when link inside iframe is clicked

    My website uses a very tall iframe to display catalog pages from an external website. I'm using iframes here to make it look like the external catalog pages are on my webpages.

    The problem is that when a visitor goes to my page, scrolls down to view all the contents inside the iframe, and then clicks a link inside the bottom of the iframe to goto the next page, that next catalog page will load inside the iframe, but the visitor will still be looking at the bottom of the iframe on my website, and thus has to scroll up to the top of my website to see the top of the iframe's contents.

    To see exactly what I mean, go here, scroll down, and click the next page link: http://neatoincognito.com/catalog.html

    How can I make it so when someone clicks a link inside the iframe, that the page with the iframe automatically scrolls to the top appearing as if the whole website has refreshed?

  2. #2
    Join Date
    May 2005
    Posts
    34
    If I'm not clear in what I'm asking please let me know. I still don't have a solution for this.

  3. #3
    Join Date
    Mar 2005
    Posts
    767
    I can't test this in any browser except Opera now but at least there it works so you might give it a try. Add the following after the iframe tags in your top frame:
    Code:
    <script>  
    setTimeout(function () {
    	function to_0_0() { scrollTo(0, 0) }
    	var iframe = document.getElementById("logomall")
    	try {
    		iframe.addEventListener("load", to_0_0)
    	}
    	catch (e) {
    		iframe.attachEvent("onload", to_0_0)
    	}
    }, 400)
    </script>

  4. #4
    Join Date
    May 2005
    Posts
    34
    This is great! I have two issues though:

    1) This works in Internet Explorer but not Firefox. What can be done to make this work in FF?

    2) Is it possible for this scroll up trick to work when the new page first starts loading instead of after the page has completely loaded?

    Thanks so much so far.

  5. #5
    Join Date
    Mar 2005
    Posts
    767
    Please change the code to
    Code:
    setTimeout(function () {
    	function to_0_0() { scrollTo(0, 0) }
    	var iframe = document.getElementById("logomall")
            iframe.onreadystatechange = to_0_0
    	try {
    		iframe.addEventListener("load", to_0_0)
    	}
    	catch (e) {
                    alert(e.message)
                    if (iframe.attachEvent)
      		   iframe.attachEvent("onload", to_0_0)
    	}
    }, 400)
    then test the page in Firefox, see what the alert message is and remove the alert line. If it says something about security or denied access then you're probably out of luck.

    MSDN claims that iframes support onreadystatechange, so that could maybe scroll the page up as soon as the page starts loading in IE. Good luck...

  6. #6
    Join Date
    Aug 2010
    Posts
    1

    Exclamation

    Its not that complicated! this code works in FF and other browsers!

    put this in your head:

    <script language="javascript">
    function scrolltotop() {
    scroll(0,0);
    }
    </script>

    and add scrolltotop() as onload to your iframe!

    <iframe name="iframe" onload="scrolltotop()">
    Calum

  7. #7
    Join Date
    Jan 2012
    Posts
    3

    Red face It worked!

    This latest option worked for me. Thanks so much!!! Easy as pie!

  8. #8
    Join Date
    Jan 2013
    Posts
    1
    Works like a charm.

    Thank you, CalumMc!

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles