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 ?