Discussion :

[rocketter]

Bonjour,

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

[Spartacusply]

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

[rocketter]

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

[Spartacusply]

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� ?

[rocketter]

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

[NoSmoking]

Bonjour,

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

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

[rocketter]

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 ...

[NoSmoking]

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

on veut des noms , 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.

[rocketter]

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



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 ...

[Spartacusply]

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

[rocketter]

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

[Spartacusply]

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.

[sekaijin]

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+

[rocketter]

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 ?

[sekaijin]

Ok j'ai pig�

Code html :

S�lectionner tout - Visualiser dans une fen�tre � part

<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

[Spartacusply]

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

[Bovino]

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

Code html :

S�lectionner tout - Visualiser dans une fen�tre � part

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

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

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

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 html :

S�lectionner tout - Visualiser dans une fen�tre � part

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

correspondra �

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

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 html :

S�lectionner tout - Visualiser dans une fen�tre � part

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

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

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 :

S�lectionner tout - Visualiser dans une fen�tre � part

a.onclick = "fn2()";

qui lui peut se traduire ensuite en

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

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

ce qui explique pourquoi les attributs d'�v�nements sont loin d'�tre recommand�s.

[sekaijin]

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

dans ce cas il faut �crire

Code html :

S�lectionner tout - Visualiser dans une fen�tre � part

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

mais je suis d'accord avec bovino mieux

Code html :

S�lectionner tout - Visualiser dans une fen�tre � part

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

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

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

[rocketter]

Bonjour messieurs,

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

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

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

et ma classe visibilit�

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

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 ?

[rocketter]

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 ?