I have an Angular 5 application (an application form) that gets embedded into an Iframe on multiple sites. When a user selects 'Next' to go to the next section of the form, I need the page to scroll back to the top.
Trying things like:
window.scrollTo(0,0);
document.body.scrollTo(0,0);
window.parent.scrollTo(0,0);
document.getElementById("myid").scrollIntoView();
document.querySelector('body').scrollIntoView(); => What I'm currently using
are working fine on all browsers except Safari desktop.
Safari doesn't seem to be respecting my code from inside the iframe to scroll back to the top of either iframe or parent (I'm aware of cross domain issues trying to access parent frame). So far I've tested in Safari 12 on MacOS Mojave through BrowserStack.
I just want to know how to make this work in SAFARI DESKTOP specifically, not having trouble with other common browsers, including Internet Explorer 11.
I am currently calling my scroll top function when the next section of the my form initializes (user selects 'Next' and the next component/section of the form renders). I have it scrolling back to the top of the page like so:
Ex.
ngOnInit() {
document.querySelector('body').scrollTo(0,0);
...
}
I'm thinking with Safari that I may need to use a different lifecycle hook, like ngAfterViewInit(). This is only speculation as to why I can't figure out why Safari doesn't seem to be scrolling to the top of the page at all. Quick mention: this isn't a problem on mobile Safari since we don't have the mobile version embedded into an Iframe, only desktop Safari.
