Bonjour,
tout est dans le titre ; comment stopper le scroll qui se produit lorsque l'on clique sur une ancre ?
Version imprimable
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,tu as visiblement plut�t un probl�me de conception de ta page.Citation:
... et du coup �a dissimule le menu au dessus
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 ...
on veut des noms :mouarf:, cela aidera surement � comprendre ce que tu veux faire.Citation:
Certains sites avec des navigations en slide utilise des ancres et des target mais chez eux �a ne scroll pas ...
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�
du coup le onclick ne fait que l'appel de la fonction et l'active pas le lien d'o� pas de scrollCode:<a href="#monAncre" onclick="showArticle(this); return false;">link</a>
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
sera interpr�t� par JavaScript comme (si a correspond � la balise <a>) :Code:<a href="#" onclick="fn2()">Cliquer</a>
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.Code:
1
2
3 a.onclick = function fn1(){ fn2(); };
Alors que
correspondra �Code:<a href="#" onclick="return fn2()">Cliquer</a>
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:
1
2
3 a.onclick = function fn1(){ return fn2(); };
Code:<a href="#" onclick="fn2(); return false">Cliquer</a>
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 HTMLCode:
1
2
3
4 a.onclick = function fn1(){ fn2(); return false; };
qui lui peut se traduire ensuite enCode:a.onclick = "fn2()";
ce qui explique pourquoi les attributs d'�v�nements sont loin d'�tre recommand�s. ;)Code:a.onclick = eval("fn2()");
dans ce cas il faut �crireCode:<a href="#monAncre" onclick="return showArticle(this);">link</a>
mais je suis d'accord avec bovino mieuxCode:<a href="#monAncre" id"monId">link</a>
ou utiliser les m�thodes addEventListener attachEvent (qui malheureusement ne sont pas cross browser)Code:
1
2
3
4
5 document.getElementById('monId').onclick = function () { //code qui affiche le div ... return false; }
A+JYT
Bonjour messieurs,
merci d�j� de vos interventions sur ma probl�matique, j'ai donc essay� ceci :
et ma classe visibilit�Code:
1
2 document.getElementById('lien_cliqué').addEventListener("click",function(){ document.getElementById('article_du_lien_cliqué').className = "visibilite"; return false;});
mais cela ne fonctionne pas :(Code:
1
2
3
4
5
6 #conteneur .visibilite { z-index: 1; visibility: visible; }
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 ?