Ancres dans un div scroll... [Résolu/Fermé]

Signaler
-
kadeh
Messages postés
337
Date d'inscription
vendredi 21 décembre 2007
Statut
Membre
Dernière intervention
9 mai 2013
-
Bonjour,


J'essaye de développer ma page perso en créant un site à une seule page mais avec un contenu complet permis par une riche couche javascript.

Ma page est conçue de la sorte : un bloc principal contenant un bloc footer, body et header. Dans le bloc body, il y a le bloc "white" qui contient toutes les infos selon les différentes rubriques. Ce bloc "white" dispose d'un scroll car ses dimensions doivent rester fixes (je veux un mini-site donc hors de question de dépasser les 700px de hauteur, peu importe le contenu ; donc j'ai mis un scroll).
Le problème que je rencontre actuellement est le fait que je n'arrive pas à utiliser les ancres à l'intérieur de ce bloc "white". Les ancres fonctionnent en revanche parfaitement en dehors du bloc "white"...

Ma question est très simple : Pourquoi ?
Si quelqu'un avait une petite idée je lui serait très reconnaissant de la partager :-)

Angy.


4 réponses

Messages postés
337
Date d'inscription
vendredi 21 décembre 2007
Statut
Membre
Dernière intervention
9 mai 2013
89
Bonjour,
je vois pas pourquoi les ancres ne fonctionnent pas.
essayez ça par exemple:
<p>liste rubriques<br /> 
<a href="#rubrique1">p1</a> - <a href="#rubrique2">p2</a> - <a href="#rubrique3">p3</a> - <a href="#rubrique4">p4</a> - <a href="#rubrique5">p5</a> - <a href="#rubrique6">p6</a> - <a href="#rubrique7">p7</a> - <a href="#rubrique8">p8</a></p> 
<div style=" height:50px;overflow:scroll; border:1px solid #000000"> 
  <p id="rubrique1">rubrique 1 <a href="#rubrique8">fin</a></p> 
  <p id="rubrique2">rubrique 2</p> 
  <p id="rubrique3">rubrique 3</p> 
  <p id="rubrique4">rubrique 4</p> 
  <p id="rubrique5">rubrique 5</p> 
  <p id="rubrique6">rubrique 6</p> 
  <p id="rubrique7">rubrique 7</p> 
  <p id="rubrique8">rubrique 8 <a href="#rubrique1">début</a></p> 
</div>

si vous faites les ancres par autres manières, il serait mieux de voir le code source.
@+
2
Merci

Quelques mots de remerciements seront grandement appréciés. Ajouter un commentaire

CCM 74406 internautes nous ont dit merci ce mois-ci

Bonjour kadeh,

Merci pour ta réponse. J'avais essayer la même chose en remplaçant seulement tes "<p id=..." par de simples <a name=...
Le résultat marche finalement bien. Le problème venait du fait que j'avais laissé 3 fichiers javascript liés à mon document et c'était ces 3 fichiers qui bloquaient le fonctionnement des ancres.

Même si le problème de base est résolu (le fait que les ancres marchent bien dans mon scroll), mon problème majeur subsiste...

En réalité, je souhaite utiliser une fonction de smooth scroll dans mon div qui sera en fait non pas en overflow=scroll mais en overflow=hidden.
Le but étant d'afficher à l'internaute qu'une seule partie de tout le contenu du div, et de changer de partie dynamiquement en cliquant sur des boutons mais donc sans changer de page.

Les 3 fichiers .js liés sont les fichiers nécessaires à ce smooth scroll (défilement de la page dynamique).
Je les ai essayé sans div, sur une page très simple, et ils fonctionnent parfaitement : l'effet est dynamique à souhait!
Mais voila que je souhaite utiliser ce dynamisme dans un div et plus rien ne fonctionne... Et donc, comme j'ai pu le constater, l'utilisation de mes ancres en est même limitée!

:-(


Une idée ? comme ça, à vif . :-/
Messages postés
337
Date d'inscription
vendredi 21 décembre 2007
Statut
Membre
Dernière intervention
9 mai 2013
89
Bonjour,

vous pouvez consulter ce site (2ème exemple)
http://scripterlative.com/files/softdivscroll.htm
@+
Kadeh je crois que vous êtes mon sauveur!
Le lien que vous m'avez donné semble contenir tout ce dont j'ai besoin pour aller encore plus loin que ce que j'avais prévu pour le projet initial.

Donc un grand merci à vous!
Angy.
kadeh
Messages postés
337
Date d'inscription
vendredi 21 décembre 2007
Statut
Membre
Dernière intervention
9 mai 2013
89
il n'y a pas de quoi
Bonne chance.