Navigation dans l'article

Navigation dans l'article

De nombreux sites proposent un menu ou des liens pour afficher, en haut de page, une partie de l'article.

Voyons si je peux proposer un truc dans ce genre: clic sur chaque bouton..

Sur beaucoup de blog, nous trouvons des flèches pour aller en haut de page ou en bas de page.
Il peut s'agir de javascript, de html/CSS ou de module.
N'oublions pas que, sur la plupart des claviers, nous disposons de 2 touches: page flèche vers le haut et page flèche vers le bas alors, est-il besoin d'ajouter des lignes à votre blog ?
Ce type de structure ne convient que sur des articles longs, qui obligent à faire défiler de haut en bas (scroller).
Comme je n'ai, en principe, pas grand chose à raconter, je vais chercher des petites histoires pour compléter mes paragraphes.

Une femme rentre chez elle et entend un drôle de bruit provenant de la chambre de sa fille. Elle ouvre la porte et surprend sa fille en train……. de se faire l’amour avec un vibromasseur.
Elle lui demande :- Pour l’amour du ciel, qu’est-ce que tu fais là ?
Sa fille lui répond alors :- Maman, j’ai 35 ans, pas mariée et ceci est la chose que j’ai trouvée qui se rapproche le plus d’un mari. Alors sors d’ici et laisse-moi seule.
Le lendemain le père entre dans la maison et entend le même bruit provenant de la chambre de sa fille. Il ouvre la porte et surprend sa fille en train de faire l’amour passionnément avec son vibromasseur.
Il lui demande ce qu’elle fait là.
Elle répond :- Papa, j’ai 35 ans, pas mariée et c’est la seule chose que j’ai trouvée qui se rapproche le plus d’un mari. Alors sors d’ici et laisse-moi seule.
Quelques jours plus tard la mère entre dans la maison avec ses provisions qu’elle place sur la table de la cuisine quand elle entend le même bruit mais cette fois-ci venant du salon. Elle entre alors dans le salon et voit son mari étendu sur le sofa, buvant une bière froide et regardant la télévision. Le vibromasseur est à côté de lui sur le sofa et vibre comme un fou.
Sa femme lui demande alors :- Pour l’amour du ciel qu’est-ce que tu fais là ?
Son époux répond :- Je regarde le foot avec mon gendre… !

Sur d'autres sites, nous trouvons soit un menu (exemple ici), soit des liens, dans le texte, nous dirigeant vers un paragraphe sur le sujet.
Nous connaissons les liens vers des pages externes mais lorsqu'il s'agit d'un paragraphe de l'article lui-même, ces liens font défiler l'article jusqu'à afficher le paragraphe concerné.
Je constate que, la hauteur de chaque paragraphe étant variable, il faut ajuster le mouvement de l'article en fonction de la hauteur de chaque paragraphe: à faire "a la main" car je ne vois pas d'autre solution !

Une blonde qui rentre chez elle après avoir fait du shopping pendant les soldes, entend des bruits bizarres venant de la chambre à coucher située à l'étage.
Elle se précipite en haut et trouve son mari tout nu, allongé sur le lit, complètement en sueur et tout essoufflé.
"Mais qu'est-ce qui se passe ?" dit-elle.
"Je suis en pleine crise cardiaque" dit le mari. Appelle les secours !"
La blonde se précipite en bas pour appeler le S.A.M.U., mais au moment de faire le numéro, son fils de 4 ans arrive et lui dit :
"Maman, Maman, Tante Martine est cachée dans ton armoire, elle est toute nue et ne veut pas qu'on sache qu'elle est là."
La blonde raccroche alors brutalement et remonte en vitesse dans la chambre, ouvre violemment la porte de l'armoire et, bien sûr, y trouve sa sœur, complètement nue et recroquevillée dans la penderie.
Salope ! dit-elle. Mon mari est en train de faire une crise cardiaque et toi, tu joues à cache-cache avec ton neveu. T'as pas honte ?

Sur ce principe, nous pouvons proposer un article avec liens vers différents paragraphes, que le visiteur pourra afficher directement, sans avoir à faire défiler l'article entier.
Ces paragraphes étant à différentes hauteurs de l'article, les commandes haut de page et bas de page ne conviennent pas.
Il faut donc diriger vers une partie précise de l'article, en fonction de sa position dans l'article.

Une blonde souhaite acheter des chaussures en cuir de crocodile.
Elle demande à un vendeur s'il en a.
Le vendeur lui répond : Désolé madame, je n'en ai plus.
Déçue, la blonde rentre chez elle, prend un bâton et va dans les marais.
Le vendeur de chaussures passe par là, et voit la blonde avec son bâton, à côté d'un tas de crocodile assommés à côté d'elle.
La blonde continue, tire et sort un autre crocodile de l'eau.
Enervée, elle dit : Encore un qui n'a pas de chaussures !

Code de principe.
<div style="width: 100vw; height: auto; overflow: hidden;"><input id="dir1" class="dir" type="text" value="lien 1" /><input id="dir2" class="dir" type="text" value="lien 2" /><input id="dir3" class="dir" type="text" value="lien 3" /><input id="dir4" class="dir" type="text" value="lien 4" />
<div id="chp">
<div id="chp1">Chapitre 1</div>
<div id="chp2">Chapitre 2</div>
<div id="chp3">Chapitre 3</div>
<div id="chp4">Code de principe.</div>
</div>
</div>
<style></style>