Problèmes avec les ancres nommées sur un contenu horizontal

Bonjour à tous, je suis complètement débutante en code ainsi qu'une véritable novice pour ce qui est des forums, j'en appelle donc à votre indulgence ...

Je suis en train faire un site qui a vocation à etre un portfolio, malheureusement je ne peux pas vous donner de lien pour l'instant, alors je vais essayer d'expliquer au mieux sa structure :

Il est principalement composé de trois éléments :

un Header fixe qui contient ma navigation principale (lien vers d'autres pages)

une Div conteneur: qui reçoit les images relative au portfolio, en réalité c'est une succession de tranches qui forment une grande image horizontale (hauteur fixe) sur laquelle on peut scroller (barre et mousewheel)

et le footer fixe qui contient lui aussi une succession d'image schématisant le 'ruban' d'image principal.

(en gros header et footer ont une hauteur de 15% et le conteneur 70%, j'ai utilisé des media queries pour le rendre responsive, du coup mes pages CSS sont enormes je ne les mettrai pas dans un premier temps mais dites moi si il vaut mieux que je les mette)

Ce que je souhaite c'est que certaines images du footer puissent agir comme des ancres pour emmener le visiteur plus loin dans le scroll horizontal.

je vous met le code pour plus de clarté (ou pas .... , soyez indulgents siouplait)

<div id="top"></div><!--
  --><div id="nav"><!--
    --><div id="top02" class="gridCo ntainer clearfix invisiblePortrait"><ul id="ul02"><!--les <li> de ma navigation je vous epargne les détails--></ul></div></div><!--

  --><div id="container"><!--
  --><div id="hero" class="gridContainer clearfix"><!--
  	--><img id="img01" src="images/images/design/images/design_01.png"><!--
    --><img id="img02" src="images/images/design/images/design_02.png"><!-- 

et ainsi de suite j'ai 12 img

    --></div><!--
  --></div><!--
  --><div id="footer" class="clearfix gridContainer"><div id="schemaNav"><!--
  --><div id="schemaNav02"><!--
  --><img src="images/images/design/images/design-schema-gris_01.png"><!--
  --><a href="#img02"><img src="images/images/design/images/design-schema-gris_02.png" name="sch02" onMouseOver="sch02.src='images/images/design/images/design-schema-hover_02.png'" onMouseOut="sch02.src='images/images/design/images/design-schema-gris_02.png'" /></a><!-- 

encore d'autres images

</div></div></div>

Mais les ancres ne fonctionnent absolument pas !!
Le navigateur détecte qu'il y a un lien mais il ne semble pas cliquable ou du moins rien ne se passe.
Après de longues recherches (est-il possible de créer des ancres horizontales ? etc..), et différents essais, me voilà bredouille.

Tout ce que j'ai constaté c'est que l'ancre fonctionne si on lui demande de s'ouvrir dans un autre onglet.

Jusqu'à maintenant j'ai réussi a régler les problèmes que j'ai rencontré et j'ai même fais un peu de Jquery et je me demande si ce n'est pas çà qui bloque . est-ce possible ?

Je vous poste mes scripts (honnetement je comprend de manière très limitée le fonctionnement de Jquery pour le moment Mais je nedemande qu'à apprendre je trouve çà génial

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="jquery.scrollTo-1.4.2-min.js" type="text/javascript"></script>
<script type="text/javascript">
    $(document).ready(function() {
 
        $("#footer a").click(function() {
            $.scrollTo($(this).attr("href"), "slow");
            return false;
        });
 
    });
</script>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script>
$(document).ready(function(){
	$('#hero').width(13.02*$('#hero').height()); 
	$(window).resize(function(){
		$('#hero').width(13.02*$('#hero').height()); 
		});
	$(window).resize(function () { 
		location.reload();
	});
});
</script>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script>
$('#top').click(function() {
	if ($(window).width() < 1000){
		$('#nav').slideToggle('fast');
	}
});
</script>
<script src='jquery.mousewheel.min.js'></script>
<script src='smooth.pack.js'></script>
<script>
$(document).ready(function() {
	$('html, body, *').mousewheel(function(e, delta) {
		this.scrollLeft -= (delta * 150);e.preventDefault();
	});
});
</script>

Je me demande si le .scrollLeft ne peut pas y être pour quelque chose ?
sinon j'ai lu sur des forums que le z-index ou bien la position fixed peuvent aussi poser des problèmes dans ces cas là ...

Voila j'ai fini de vous assomer avec ce très long post
J'attend avec impatience vos avis ! Merci

PS: j'ai trouvé ce lien http://multimedia-jean-monnet.fr/promo_2012/Pons_C/ok/index.html
C'est exactement ce que je veux faire mais avec la fonction mousewheel scrollLeft
Modifié par CloeMims (16 Oct 2015 - 15:09)

Dans ton html ne serait-ce pas judicieux de doubler tes ancres comme id="img02" par name="img02" ?

C'est ce qu'un navigateur comme FireFox exige toutefois ...
Modifié par pictural (10 Nov 2015 - 03:23)

Bonjour merci pour la réponse,

Pour être sure de bien comprendre,

Tu veux dire utiliser id="img02" et name="img02" dans la balise img,
mais dans la balise <a> utiliser href="img02" ou bien href="#img02" ?

J'ai l'impression que le pb est du a mon CSS, qu'il bloque en quelque sorte le scroll vers la droite pour accéder à l'ancre parce que si l'on ouvre le lien de l'ancre dans un nouvel onglet la cible fonctionne.

après tu fera gaffe, ta pas mis dans document.ready

<script>
$('#top').click(function() {
	if ($(window).width() < 1000){
		$('#nav').slideToggle('fast');
	}
});
</script>

Quand tu clic, que te dis la console du navigateur ? erreur JS?

exemple très simple de scroll left ici
Modifié par JENCAL (10 Nov 2015 - 13:26)

Merci pour le check jquery mais j'ai déjà modifié cette partie le post date un peu et j'ai fais des modifs depuis.

Pour être honnête n'ayant aucune idée de résolution de mon problème ni aucune réponse ici j'ai laissé de côté mon idée d'ancres horizontales. Mais j'aimerais vraiment comprendre pourquoi ca n'a pas marché et si je peux reinserer çà dans mon site je suis carrément preneuse.

Au fait depuis je l'ai mis en ligne ça donne ça :
http://cloemimault.fr

*edit*

Les ancres devaient etre dans le footer sous forme d'images à la queue leuleu, une sorte de schema de mon bandeau d'images principal (pour les pages graphisme,design et metiers d'art)
Modifié par CloeMims (10 Nov 2015 - 13:29)

Merci pour le lien je vais essayer ça !