I have 3 route paths: Contact, Customers, Greeting
Desired behavior:
From Customers page, and then navigating to Contact page, I want the page to scroll to the middle of the page. I only want this to happen if going from Customers -> Contact, not from any other route -> Contact. and not from refreshing the page.
MY ATTEMPT (not working):
From customers, I have a function:
goHome(){
const navigationExtras: NavigationExtras = { state: { middle: 'middle' } };
this.router.navigate(['contact'], navigationExtras);
}
When it navigates back to Contact:
const navigation = this.router.getCurrentNavigation();
const state = navigation?.extras.state as { middle: any };
console.log(this.router.getCurrentNavigation());
if (state){
if ( state['middle'] === 'middle'){
setTimeout(() => {
this.middle.nativeElement.scrollIntoView({
block: 'start',
behavior: "smooth"
});
}, 1500);
}
}
Problem: When I refresh the page, it still scrolls down to the middle section in my contact page. I don’t know how to replicate this in stackblitz, but on my local code, it has this behavior. Refreshing on contact page, still scrolls down to the middle.