11521 sujets

JavaScript, DOM et API Web HTML5

Bonsoir à tous

Je cherche à faire défiler la page vers une balise, ce qui est une fonctionnalité courante, mais tous les exemples que je trouve sont en JQuery.
Auriez vous dans un coin un modèle en pur JS? Je n'ai pas trop envie de réinventer la poudre et le fil à couper le beurre... Smiley smile
Bonjour,
PapyJP a écrit :
Je n'ai pas trop envie de réinventer la poudre et le fil à couper le beurre... Smiley smile

C'est justement tout l'intérêt de jQuery (et des plugins) ! Smiley cligne
Sinon, avec l'exemple de parsimonhi, on peut recréer facilement la même chose avec les liens fixés en haut de page (cela évite entre autres choses de répéter 15 fois le même code) :
https://jsfiddle.net/qcq18an8
Modérateur
Bonjour,
SolidSnake a écrit :
Sinon, avec l'exemple de parsimonhi, on peut recréer facilement la même chose avec les liens fixés en haut de page (cela évite entre autres choses de répéter 15 fois le même code) :
https://jsfiddle.net/qcq18an8
Le soucis avec le menu en fixed, c'est qu'il faut veiller à ce que les blocs ne passent pas en dessous. Si on met un margin-top sur tous les blocs (comme c'est le cas dans https://jsfiddle.net/qcq18an8), ils s'affichent mal quand ils ne sont pas en haut de page (ils sont précédés de ce margin-top même quand ils sont en milieu de page). Du coup, il faudrait adapter la solution pour ce cas précis (quand il y a quelque chose en position fixed en haut), a priori en modifiant le code javascript (si on n'a rien en fixed en haut, ce n'est pas la peine).

EDIT : en reprenant la bonne idée de SolidSnake, voici une version adaptée quand on a un bandeau en fixed en haut : https://jsfiddle.net/uxd4rchd/

C'est ce genre de détails qui montrent que parfois, jquery peut avoir du bon (et pourtant, je ne suis vraiment pas un fan de jquery).

Amicalement,
Modifié par parsimonhi (26 Feb 2016 - 11:21)
Merci de vos réponses.

Je suis d'accord avec vous: techniquement, JQuery est certainement la bonne solution pour ce genre de choses.
Mais pour le site en question, où je ne suis que conseiller, je ne tiens pas à compliquer les choses pour le propriétaire, qui a du mal à jongler avec HTML, JS et CSS, sans compter quelques scripts en PHP que je lui ai installés. Smiley sweatdrop Je ne vais pas lui ajouter encore un langage, de même que je n'ai pas utilisé de préprocesseur CSS, et pourtant ce n'est pas l'envie qui me manque.

Pour le problème précis que je veux traiter:

Il s'agit d'une série d'une trentaine de "tuiles". Chaque tuile est matérialisée par une image et un petit résumé de ce que contient un document, les utilisateurs cliquent sur la tuile pour afficher le document. A la demande du propriétaire du site, j'ai fait un menu déroulant qui permet de trouver rapidement la bonne tuile, et le but est d"aller" à la tuile en question.

J'ai commencé par le plus simple: une ancre nommée et un lien vers cette ancre, mais ça saute d'un seul coup vers la tuile cible, l'ergonomie n'est pas terrible. J'ai pensé qu'un scroll un peu plus lent améliorerait la situation mais le résultat n'est pas probant, je vais trouver autre chose, du genre cloner la tuile et la mettre au premier plan en haut de la page.
Modifié par PapyJP (26 Feb 2016 - 12:02)