Tagancre

[HTML] Le positionnement d’un contenu ancré est décalé à l’écran par rapport à l’emplacement où est placé l’ancre dans le code source de la page.

Source: Anchor link landing in wrong position.

Code qui pose problème:

Suggestion de correction:

I think the problem is resulting from the anchors with no contents that you are using.

Also, it appears that name= has been deprecated in favor of id= as a fragment identifier in certain elements (including A) which makes a kind of sense as ID attributes are unique whereas NAME attributes are not so guaranteed.

I’d try sticking the fragment identifier in the actual renderable entity such as:

and see where that gets you. Incidentally, it looks like a good conference, I hope you get a comp admission.

Réponse de l’OP:

Aha! Got it, worked a charm, thanks mate. Incidentally – I’m one of the conference organiser, no web dev! So not only will I be at the conference, but also drinking whiskey with the speakers 🙂

[Foundation 6] Créer une ancre vers le haut de page avec le composant Sticky

Attention: merde lorsqu’on utilise des composants de type Accordéon, etc … (lorsque la hauteur de page s’agrandit) !!

Sur chaque page du site, une fonctionnalité de scroll automatique/retour vers le haut de page peut-être ajoutée en exploitant le composant Sticky de Foundation 6. Ce lien de retour devrait apparaître dès qu’un scroll est nécessaire et serait fixé en bas de page sur la limite haute du bloc footer.

Bloc HTML à placer en haut de page (dans le DOM)

Bloc HTML à placer juste avant le footer (dans le DOM)

Code JS

Edit 01/12/2017: (à priori) fonctionne sans le code ci-dessous…

Code SASS

A noter: la présence de la propriété pointer-events sur .scroll-up.sticky.is-at-bottom et .scroll-up a pour éviter que les éléments qui se trouvent sous la zone (à 100% de largeur) du sticky soient bloqués au clic. <a href="https://caniuse.com/#search=pointer-events">pointer-events</a> ne fonctionnera pas sous IE10 et en-dessous, mais on s’en b*% l$! c*ù|!!€%.

A noter #2: la présence de la propriété // margin-right: -25%; sur .scroll-up a pour permettre de positionner à sa guise le lien.

© 2021 devfrontend.info

Theme by Anders NorénUp ↑