Wie verwendet man Anker-Links in Elementen innerhalb des MD-Contents?

Question

Kürzlich wechselte ich zu Angular material für eine Website, an der ich arbeitete, die eine Navigationsleiste (jetzt eine Symbolleiste) mit Schaltflächen hatte, die beim Klicken zu Abschnitten auf der Seite blättern würde.

, nun die Symbolleiste shrink Effekt zu haben und wieder auf Scroll-up hatte ich auf einer md-Inhaltskomponente den Seiteninhalt setzen direkt nach der Symbolleiste, aber es brach alle Anker-Links-Funktionalität ...

I kann nicht scheinen, eine Reparatur dafür zu finden, sie arbeiten nur, wenn das scrollable Element der Körper ist, aber dass ich den Schrumpfeffekt, Kräuselungseffekt verliere und sogar ein sonderbar aussehendes sidenav ...

relevanten Code erhält:

CSS:

body{ 
    overflow-y: hidden; 
} 
#main-content{ 
    height: 100vh; 
} 

HTML:

<md-toolbar md-scroll-shrink> 
    (...) 
    <md-button href="#leave-email">Click</md-button> 
</md-toolbar> 
<md-content id="main-content"> 
    (...) 
    <md-button href="#leave-email">Click</md-button> 
    (lot of stuff) 
    <section id="leave-email">(...)</section> 
</md-content> 

Keine der oben genannten Tasten arbeiten, vorher war ich Angular smooth scroll für eine glatte Scroll verwenden, aber ich entfernt es beim Versuch, dieses Problem zu lösen.

Answer 1

Das funktioniert nicht unbedingt für die meisten Elemente; Dies liegt daran, dass nicht alle Elemente das HREF-Attribut haben. Ein Weg, um dieses ist es, die onClick-Methode zu verwenden, wie unten (Button nicht über die HREF-Attribut entweder):

<button onClick="location.href = 'http://google.co.uk/';"></button> 

jedoch, wenn dieser verwendet wird, werden Sie den Cursor als Standard-Cursor bleiben, so dass diese mehr machen wie die HREF des A-Tag, können Sie hinzufügen: onMouseOver="this.style.cursor = 'pointer';" und onMouseOut="this.style.cursor = 'default';"

prüfen dieses Beispiel unter:

<button onMouseOver="this.style.cursor = 'pointer';" onMouseOut="this.style.cursor = 'default';" onclick="location.href = 'http://google.co.uk/';">Click Here</button>

Hoffe, das hilft!