Anchor in the same page

Question

Im creating an ionic app based on Angular (first time) I created a card with anchors that send me to other cards in the same page.

 <ion-card>
          <ion-item  class="activated">
            <ion-icon name="camera" slot="start"></ion-icon>
            <ion-label  routerLink= "#visit">Pics</ion-label>
          </ion-item>
 </ion-card>

This anchor should send me to a card with the same id="visit" but it's not working .

<ion-card id="visit">
      <ion-card-header>
          <ion-card-title > 
          <ion-icon style="padding-top:5px" name="camera" ></ion-icon>
            Pictures
          </ion-card-title>
        </ion-card-header>
  </ion-card>

I checked google but all result that I get are about other issues.

check this https://stackoverflow.com/questions/50836497/using-html-anchor-link-id-in-angular-6 — user733421, Sep 09 '19 at 13:15

Vitor Piovezam · Accepted Answer · 2019-09-09T13:48:13.313

0

TherouterLink attribute is how Angular transite into pages, to connect to an anchor in your own page, use the old and cool <a href=#visit>

  <ion-card>
    <ion-item  class="activated">
      <ion-icon name="camera" slot="start"></ion-icon>
        <a href="#visit">
          <ion-label>Pics</ion-label>
        </a>
      </ion-icon>
    </ion-item>
  </ion-card>

Another solution, to makes scroll smooth you can call an method on click at <ion-label (click)="scroll()">Pics</ion-label> and invoke

 scroll() {
   var anchor = document.getElementById("visit");
   anchor.scrollIntoView({block: "end", behavior: "smooth"});
 }

edited Sep 09 '19 at 13:48

answered Sep 09 '19 at 13:25

Vitor Piovezam

445
3
10

I tried Pics and function on mypage.ts scroll(id){ var anchor = document.getElementById(id); anchor.scrollIntoView({block: "end", behavior: "smooth"}); } But It didn't work – Med Sep 09 '19 at 13:35
At click function, pass argument as string 'visit'. If you made this in function, is not necessary pass href. is an alternative solution. – Vitor Piovezam Sep 09 '19 at 13:38
Ok thanks your function worked you don't need the link ... just put the function on the label (click)="scroll()" Please delete the first part so I can close it as the answer – Med Sep 09 '19 at 13:45
A tip if you want to use this in other parts of this project, is extract this code to an scrollService class. I`m happy to contribute ! – Vitor Piovezam Sep 09 '19 at 13:46

Anchor in the same page

1 Answers1