Jak używać linków kotwiących w elementach wewnątrz treści md?

Question

Niedawno przełączyłem się na Angular material dla witryny, nad którą pracowałem, która miała pasek nawigacji (teraz pasek narzędzi) z przyciskami, które po kliknięciu przewijałyby sekcje na stronie.

Teraz, aby mieć wpływ Pasek shrink i ponownie na przewijać w górę musiałem zawartości strony na komponencie MD-zawartość zaraz po pasku, ale złamał wszystkie funkcje linki anchor ...

I Działają tylko wtedy, gdy przewijany element jest ciałem, ale po tym tracę efekt kurczenia się, efekt marszczenia, a nawet otrzymuję dziwnie wyglądające sidenav ...

Odpowiedni kod:

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> 

Żadne z powyższych przycisków działa, wcześniej używałem Angular smooth scroll dla sprawnego przewijania ale usunąłem je, starając się rozwiązać ten problem.

Answer 1

To niekoniecznie musi działać dla większości elementów; dzieje się tak, ponieważ nie wszystkie elementy mają atrybut HREF. Sposobem na to jest użycie metody onClick jak poniżej (przycisk nie ma atrybutu href albo):

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

Jednak podczas korzystania z tego, kursor pozostanie jako domyślny kursor, tak aby uczynić to bardziej jak HREF w tagu jest, można dodać: onMouseOver="this.style.cursor = 'pointer';" i onMouseOut="this.style.cursor = 'default';"

Sprawdź ten przykład poniżej:

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

Mam nadzieję, że to pomoże!