11521 sujets

JavaScript, DOM et API Web HTML5

Scroller jusqu'à un Anchor

Bonjour,
Je fait couramment scroller mes pages ,et selon mon besoins j' ais deux méthodes:
1) j'ais une image bouton par exemple en haut de page, qui représente une flèche vers le bas et
cliquée elle scroll jusqu'à un Anchor "#toto" comme ceci:

<!--  en haut de page ou ailleurs -->
<a href='#bas'><img src='bas.png' alt=' '/></a>
<!-- et en bas  de page -->
<div id='bas'></div>

L'autre méthode est en javascript

 document.anchors[machin].scrollIntoView();

Mais cette solution monte l'Anchor en haut de page alors que je le voudrais visible OUI mais en bas de page !
Merci
Salut,

en javascript tu as la fonction scrollIntoView qui doit correspondre à ce que tu veux : https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView

Edit : Je lis trop vite, c'est déjà ce que tu utilises u_u
Edit 2 : Bon je pensais qu'on pouvait s'en sortir avec les options mais ça n'a pas l'air d’être le cas Smiley ohwell
Proposition : on remonte de 100% moins une taille fixe
function scrollElt(id){
  id.scrollIntoView({ block: "end"});
  window.scrollBy({ top: 30 -id.clientHeight });
}


Jsfiddle pour illustrer : https://jsfiddle.net/ts32n6vb/1/
Modifié par Mathieuu (07 Jun 2023 - 14:06)
Salut,
j'avais remarqué les deux flèches sur ton site et je trouvais ça bien. Mieux qu'une flèche qui, en JavaScript apparaît au scroll. C'est ce genre de flèche en js que j'ai installé sur tous mes sites, mais parfois, elle peut gêner et recouvrir une partie d'image ou de texte. En mobile, je l'ai même désactivée, c'est pire, au vu du peu de place disponible.
Je ne comprends pas, c'est quoi qui te dérange ?
J'ai aussi tenté la flèche qui apparaît quand on descend sur la page mais disparaît quand on remonte. Pas concluant. La solution idéale, je la cherche.
Salut,

Je ne suis pas sûr de ce que tu cherches à obtenir, mais si c'est ce que je crois, pas besoin de JavaScript : CodePen.

Édit : Ah ! au final je crois que c'est Mathieuu, dans son message réédité, qui a compris ton problème et donné une solution adéquate...
Modifié par Olivier C (07 Jun 2023 - 15:01)
Bonjour,

Quant j'avais regardé ton code JS, j'avais vu que tu utilisais "anchor()" : très pratique car renvoie un array de toutes les ancres ... mais VS Code me disait "deprécié" .

J'avais regardé sur MDN il me semble que c'est effectivement déprécié.

a écrit :

String.prototype.anchor()

Deprecated: This feature is no longer recommended. Though some browsers might still support it, it may have already been removed from the relevant web standards, may be in the process of being dropped, or may only be kept for compatibility purposes. Avoid using it, and update existing code if possible; see the compatibility table at the bottom of this page to guide your decision. Be aware that this feature may cease to work at any time.


Mais ca fonctionne encore, pour la retrocompatibilité.

Bonne soirée.
Je reviens sur ce sujet car j'ai repensé à lui en faisant une petite modif' sur un de mes codes : c'est normal que anchor() soit déprécié car il utilisait "name" plutôt qu'un ID. Ça s'explique pour des raisons historiques mais maintenant...

On peut l'émuler avec les nouvelles spécifications en ajoutant un ID à la volée sur les éléments cibles :
const lineMarks = elements => {
  const els = document.querySelectorAll(elements)
  let i = 0
  for (const el of els) {
    i++
    el.id = 'mark' + i
  }
}

lineMarks('p, h2, ul, ol') // Exemple d'éléments cibles.

Cette page utilise cette technique en créant des numéros de paragraphe : Article

Si élément cible alors scroll au bout de 2 secondes avec ceci :
if (window.location.hash) window.addEventListener('load', () => { // @note Si chargement de la page avec un hash, alors défilement jusqu'à l'élément contenant l'ancre.
  const scroll = () => document.querySelector(window.location.hash).scrollIntoView()
  setTimeout(scroll, 2000) // @note On laisse le temps au visiteur de voir l'entête de la page avant le scroll vers l'ancre.
})

Modifié par Olivier C (10 Jun 2023 - 00:42)
Prévenir un modérateur
Répondre au sujet
Aller à