同一页面中的锚点 [英] 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屋!