I can’t manage to navigate to an other page and scroll to an anchor.
I tried two ways:
1. Anchor and fragment:
I set id={{item.id}} to all the elements then I navigate with the angular router with the option : “fragement: item.id”
2. content.scrollTo
Then I try to force the scroll with a ViewChild on the content, getElementbyId on my item and get back the offsetTop.
But the offsetTop is always at 0 so I can’t scrollTo(0, offsetTop) …
I try different ways, search the net but nothing.
I can show some code if required.
When we click on the photo number 4 we want to navigate to page 2 and scroll to the photo number 4.
The Anchor<Page 2>
First thing put an Id on the elements your are listing and on which you want to be able to scroll to.
Be careful to set the elements inside a ion-content element (required to scroll)
<ion-content>
<ion-row id="post_{{post.id}}" *ngFor="let post of posts" class="ion-padding-vertical ion-align-items-center" >
// some elements
<img src={{post.photourl}}/>
</ion-row>
</ion-content>
The Link<Page 1>
Add the redirection link to each photo on the page1, using a function instead of routerLink seems easier for me.
HTML
<ion-col size="4" *ngFor="let post of posts" (click)="navigateTo(post.id)">
<img class="gridPhoto" [src]="doms.bypassSecurityTrustUrl(post.photourl)" />
</ion-col>
So we set the content variable first with @ViewChild, it’s require to scroll.
We use the route to get the fragment sended with the url
We get the element by his ID
We get his position with the function getBoundingClientRect()
The trick was here, before I tried with the parameteroffsetTopof the element but it doesn’t work anymore (don’t really known why) I could only get 0 as value. WithgetBoundingClientRect()we got the actual distance from the element to the top.
We scroll to that position with the Content element this.content.scrollByPoint()