I'm trying to integrate wetransfer into a website through an iframe, but I'm having a problem when the page loads, it jumps half-way down page, so it focuses on the iframe, instead of opening at the top of the page.
From what I can tell, there is a script on the wetransfer site that's telling it to jump to that section, instead starting at the top of the page. How can I get it to ignore the script by wetransfer or after the iframe's loaded to tell it to move back to the top of the page?
With jquery I tried $('html').scrollTop(0); after initiating the iframe, but it still doesn't work.
On the website I have jquery calculate the height of the user's screen and then set the header to that size, with a full background and navigation and than the iframe starts below that. So setting the position to absolute or anything along those lines, wouldn't work.
I created a very simple jsfiddle example just to show how the page opens scrolled halfway down the page. It only does this when the iframe source is wetransfer and not with any other source.
https://jsfiddle.net/dbruning22/c0s6mhkv/6/
HTML
<header>
Some Header information and navigation
</header>
<div class="main">
<iframe src="https://www.wetransfer.com/" width="100%" height="700" frameborder="0"></iframe>
</div>
CSS
header {
background: green;
height: 600px;
}
You can put an anchor at the top of your page like this:
HTML
On page load use this JS:
This worked for me:
1) You initially hide the iframe by setting the display to none:
2) Once the page has loaded, then show the iframe using jquery or javascript:
This worked for me across browsers
Here's a "hack" that disables autoscrolling completely, just redefine the function
window.scrollTo()
to a no-op: