web-dev-qa-db-fra.com

Faites défiler jusqu'à une partie spécifiée de la page lorsque vous cliquez sur le lien de navigation supérieur dans Blazor

Comment puis-je faire un simple "saut à" partie de la page déjà chargée dans blazor? Comme ceci en HTML:

<a href="#contact">Contact us</a>
...
<section id="contact">

Idéalement, je veux aussi avoir un défilement lisse jusqu'à cette section. Pensais que j'essaierais de résoudre cela avec CSS, mais peut-être pas possible?

12
johajan

J'ai utilisé la réponse d'Arron Hudon et cela n'a toujours pas fonctionné. Cependant, après avoir joué autour de moi, j'ai compris que cela ne fonctionnerait pas avec un élément d'ancrage: <a id='star_wars'>Place to jump to</a>. Apparemment, la blazor et les autres cadres de spa ont des problèmes de saut à ancres sur la même page. Pour contourner ce que j'ai dû utiliser un élément de paragraphe à la place (la section fonctionnerait aussi): <p id='star_wars'>Some paragraph<p>.

Exemple utilisant Bootstrap:

<button class="btn btn-link" onclick="document.getElementById('star_wars').scrollIntoView({behavior:'smooth'})">Star Wars</button>

... lots of other text

<p id="star_wars">Star Wars is an American epic...</p>

Avis que j'ai utilisé Bootstrap's btn-link classe pour que le bouton ressemble à un lien hypertexte.

0
goku_da_master