Scroll | lien ancré dans une div

Bonsoir !

Je suis un étudiant en 3ème année et, pour mon examen, je dois coder un site fictif, hélas je rencontre un soucis, jusque là ça va puisque les soucis sont choses courante en web ^^
Mais je viens de passer 2 jours dessus, j'ai demandé de l'aide éxtérieure et impossible de trouver ce qui ne vas pas, ou simplement si ma manière d'appréhender la chose est fausse.

Je m'en remet donc à vous, chers futures sauveurs, pour m'aider s'il vous plaît !

J'aimerais faire un scroll horizontal dans une div, grâce à des liens ancrés (le menu est situé en dehors de ma div #contenu)

Donc en gros, j'aimerais que quand je clique sur mon menu, ça m'amène à mon lien ancré dans mon div contenu.

Afin d'être plus explicite je vois joint ici le site simplifié : http://www.loridroel.ch/Lori2/concours2.html

Je dis un grand merci d'avance à celui qui arrivera me donner une solution, je bloque vraiment ce coup-ci.

Tu peux le faire en JavaScript, ça sera plus simple avec jQuery.

Il suffit de récupérer la position de ton ancre dans ta div (offset()) puis de modifier la valeur scrollTop() de ta div.

Bonjour jb_gfx

Tout d'abord merci de votre réponse !

Par contre je ne connais pas jQuery, pourriez vous être un peu plus explicite sur la marche à suivre ?

L'idée est d'utiliser les mots clés inconnus pour former des requêtes que l'ont tape sur son moteur de recherche préféré (au hasard Google) afin d'apprendre de nouvelles techniques et de réaliser son projet.

Mot clé : jQuery
-> Google : jquery

Association de mots clés : jQuery + offset()
-> Google : jquery offset()

Association de mots clés : jQuery + scrollTop()
-> Google : jquery scrolltop()

Lis un peu et fais quelques essais puis reviens avec quelques bouts de code. A partir de là je suis sûr que tu trouveras de l'aide ici.
Modifié par jb_gfx (05 Jun 2013 - 20:21)

salut,
il y a déjà un truc qui cloche dans ton code car tes liens devraient te conduire vers tes ancres et là il ne se passe rien. J'ai commencé à fouiller mais un peu la flemme.
Un exemple simple. Par contre le JS ne te servira à rien si tu ne veux pas de transition douce vers tes ancres.

Bonjour,

pour que res elements remonte ou descendent, il te faut modifier leur contexte de formatage.
Plusieurs options, à choisir selon le contexte

float:left
ou
overflow:hidden
ou
display:table
ou
display:inline-block

Pas besoin necessairement de js pour ça

CDt,
Modifié par gc-nomade (06 Jun 2013 - 06:38)

Merci beaucoup pour les réponses, je vais creuser et essayer vos solutions, voir si j'arrive.

:), ceci est a faire sur tes #inscription,#photos,#presentation, ... seulement.
C'est ce qui te permet de les repacer sur au bord faut de ta boite quand tu les cibles.
++.

Merci beaucoup gc-nomade !

c'était exactement ça, encore un gros merci !