同一页面中的锚点 [英] Anchor in the same page

问题描述

我正在基于Angular创建离子应用程序(第一次)我用锚创建了一张卡片，该卡片将我发送到同一页面中的其他卡片.

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>

此锚应将我发送到具有相同id ="visit"的卡，但该卡无法正常工作.

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>

我检查了google，但得到的所有结果都是关于其他问题的.

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

推荐答案

routerLink 属性是Angular如何过渡到页面，连接到自己页面中的锚点，使用老式的<代码>< a href =#visit>

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>

另一种解决方案，为了使滚动平滑，您可以在< ion-label(click)="scroll()"> Pics</ion-label> 上单击以调用方法

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"});
 }

这篇关于同一页面中的锚点的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！