Stopper le scroll sur une ancre avec javascript

Bonjour,

tout est dans le titre ; comment stopper le scroll qui se produit lorsque l'on clique sur une ancre ?

Comment ça le scroll ? Tu n'es pas directement ramené à la cible de ton lien ancre ?

si je vais directement à la cible de mon ancre, mais pour y aller le navigateur scroll ; pour un menu qui renvoie vers des ancres, ce n'est pas très pratique, car on est toujours obligé de remonter la fenêtre pour ré-accéder au menu

Du coup je comprends pas tout... Si tu cliques sur un élément de ton menu, tu veux qu'il se passe quoi s'il ne vas pas vers l'élément qui est ancré ?

le menu avec l'ancre et l'article vers lequel l'ancre pointe sont visibles dans le viewport sans que l'on soit obligé de scroller ; le menu est au-dessus de l'article.
Le comportement naturel d'une ancre fait qu'il y a un scroll jusqu'à l'article, et du coup ça dissimule le menu au dessus

Bonjour,

Citation:

---

... et du coup ça dissimule le menu au dessus

---

tu as visiblement plutôt un problème de conception de ta page.

Non pas de problème de conception, vu que le contenu de ma page est plus grand que la hauteur de mon écran, ça scroll ; je veux juste savoir s'il est possible d’empêcher ce comportement de scrolling en JS ? Certains sites avec des navigations en slide utilise des ancres et des target mais chez eux ça ne scroll pas ...

Citation:

---

Certains sites avec des navigations en slide utilise des ancres et des target mais chez eux ça ne scroll pas ...

---

on veut des noms :mouarf:, cela aidera surement à comprendre ce que tu veux faire.

Je tente une hypothèse :
Il me semble que tu cherches à faire apparaître une partie du document directement dans la fenêtre d'affichage.
Cela se gère au chargement en plaçant les éléments en position:absolute et en jouant sur leur position.

Arf pas de site exemple sous la main, par contre j'ai fait des schémas si ça peut aider :

Pièce jointe 144489Pièce jointe 144490

Donc en rouge la vue viewport qui contient aisément, l'article du lien 1 et celui du lien 2 et les menus contenant les liens ; par contre en cliquant sur lien 1, la vue viewport se positionne sur l'article 1 et du coup pour ré avoir accès au menu, on doit scroller.
C'est le comportement naturel des ancres mais quand les articles et leurs liens sont visibles en même temps, c'est dommage de devoir faire ce scroll à chaque fois, est ce que c'est un peu plus clair ?

Et sur mon site (encore en local) tous les articles sont en absolus, mais certains sont plus longs que d'autres et dépassent la taille de mon viewport, donc en cliquant sur un lien il n'y a qu'un article à chaque fois qui apparait, mais ça scroll à chaque fois ...

Donc en fait, une bonne solution ce serait de fixer ton menu (qu'il soit toujours visible) c'est ça ?

oui voilà mais pas de position: fixed si c'est à ça que tu penses lol, car ça fait moche

Ben c'est pourtant ce qu'il faut faire, mettre un fixed et mettre du css pour rendre ton menu sympa et qu'il s'intègre bien dans la page.

Sinon... je vois pas.

comme dit plus haut c'est un pb de conception de la page

soit un page avec un menu et en dessous un div content
et x div articles tous hidden positionnés tous au même endroit que le div content (sous le menu)

lorsque l'utilisateur clique sur un lien du menu le div article courant est caché display:hidden et le div article cile est rendu visible display:block
comme tous les div on la même position il s'affiche sous le menu sans scroll


A+

oui c'est ce que j'ai fait, j'ai un div conteneur de tous mes articles sous mon menu. Tous mes articles sont en absolus et en hidden ; avec un target j'attribue aux articles la propriété visibility: visible mais les liens restent des ancres et pour le coup j'ai toujours l'effet de scroll ... Y a pas moyen en javascript de contourner cet effet de scroll ?

Ok j'ai pigé

Code:

---

<a href="#monAncre" onclick="showArticle(this); return false;">link</a>

---

du coup le onclick ne fait que l'appel de la fonction et l'active pas le lien d'où pas de scroll

A+JYT

Si ta fonction "showArticle()" retourne false, ça marche aussi.

:nono:

Ce n'est pas la même chose.
Un attribut d'événement HTML, par exemple

Code:

---

<a href="#" onclick="fn2()">Cliquer</a>

---

sera interprété par JavaScript comme (si a correspond à la balise <a>) :

Code:

---

1 2 3

a.onclick = function fn1(){ fn2(); };

---

ainsi, si fn2 renvoie false (ou tout autre résultat), c'est à fn1 que ce résultat est renvoyé, mais fn1 ne renvoie rien et le comportement par défaut (aller à l'élément ou la page ciblé) n'est pas inhibé, donc le lien est suivi.
Alors que

Code:

---

<a href="#" onclick="return fn2()">Cliquer</a>

---

correspondra à

Code:

---

1 2 3

a.onclick = function fn1(){ return fn2(); };

---

là, si fn2 renvoie false, alors l'événement et le comportement par défaut seront bien inhibés, tout comme dans le cas suivant :

Code:

---

<a href="#" onclick="fn2(); return false">Cliquer</a>

---

Code:

---

1 2 3 4

a.onclick = function fn1(){ fn2(); return false; };

---

Pour aller plus loin, en réalité, la traduction JavaScript d'un attribut d'événement serait plutôt, si l'on reprend le premier code HTML

Code:

---

a.onclick = "fn2()";

---

qui lui peut se traduire ensuite en

Code:

---

a.onclick = eval("fn2()");

---

ce qui explique pourquoi les attributs d'événements sont loin d'être recommandés. ;)

Citation:

---

Envoyé par Spartacusply

Si ta fonction "showArticle()" retourne false, ça marche aussi.

---

dans ce cas il faut écrire

Code:

---

<a href="#monAncre" onclick="return showArticle(this);">link</a>

---

mais je suis d'accord avec bovino mieux

Code:

---

<a href="#monAncre" id"monId">link</a>

---

Code:

---

1 2 3 4 5

document.getElementById('monId').onclick = function () { //code qui affiche le div ... return false; }

---

ou utiliser les méthodes addEventListener attachEvent (qui malheureusement ne sont pas cross browser)

A+JYT

Bonjour messieurs,

merci déjà de vos interventions sur ma problématique, j'ai donc essayé ceci :

Code:

---

1 2	document.getElementById('lien_cliqué').addEventListener("click",function(){ document.getElementById('article_du_lien_cliqué').className = "visibilite"; return false;});

---

et ma classe visibilité

Code:

---

1 2 3 4 5 6

#conteneur .visibilite { z-index: 1; visibility: visible; }

---

mais cela ne fonctionne pas :(

y a-t-il qqch que je fais mal ?

Avec onclick, il y a le return false pour bloquer l'action par défaut de l'évènement ; mais comment faire de même avec un addEventListener ou un attachEvent ?

Pour proposer une mise en page qui pourraît répondre au problème, il y a celle du MDN (exemple), où le sommaire est d'abord positionné static puis se cale à droite en fixed quand on descend dans la page. Je trouve ça plutôt chouette :)

Citation:

---

mais comment faire de même avec un addEventListener ou un attachEvent ?

---

Il faut prendre l'évènement en paramètre et utiliser ses méthodes pour l'annuler.

Code:

---

1 2 3 4 5 6 7 8 9 10 11

// navigateurs standard ... .addEventListener("click", function( event ){ event.preventDefault(); ... }, false);   // vieux IE ... .attachEvent("onclick", function( event ){ event.returnValue = false; ... });

---

En effet présentation intéressante ; par contre comment faire pour que l'élément placé en fixed au moment du scroll, reste à sa place si l'on zoome ou dézoome la fenetre ?

Donc tu as un menu avec des ancres, mais tu ne veux pas pointer sur les cibles de ces ancres au clic ? Je me demande bien à quoi servent les ancres du coup. Enfin, pour répondre à la question, un event.preventDefault() au click comme l'a suggéré Watilin devrait faire l'affaire.

Mon pb sur les ancres est réglé, la solution proposé par sekaijin me va très bien, ma problématique concernait le scroll initié par le clic sur une ancre, non nécessaire car lien de l'article et article sont visible en même temps dans le viewport ... Je n'ai pas essayé le preventDefault() car le returnfalse me convient du coup.

Non par contre ce que j'aimerais savoir maintenant, comme sur le site du MDN que donne en exemple Watilin, c'est comment faire pour que l'élément placé en fixed au moment du scroll, reste à sa place si l'on zoome ou dézoome la fenêtre ?