pb lien ancre

danielsan · novembre 2012

Bonjour,

je souhaite faire un lien du type

<a href="#ancre">Aller à l'ancre</a>

puis à l'aide de ce script JS:

<script type="text/javascript">
	$('a[href^="#"]').click(function(){  
		var the_id = $(this).attr("href");  
		$('html, body').animate({  
			scrollTop:$(the_id).offset().top  
		}, 'slow');  
		return false;  
	});
</script>

cela me fait (normalement) un scrollto automatique.

Le problème c'est que mon lien se transforme en:

<a href="http://monsite.com/article#ancre">Aller à l'ancre</a>

alors ça ne marche plus

Quelqu'un a une idée pour palier à ce pb ?
Comment faire pour éviter que le lien ne se "transforme" ?

Cordialement,

Merci.
_____
D.San

danielsan · novembre 2012

En attendant j'ai mis un identifiant à mon lien

<a href="#diapo" id="gotodiapo">Voir le diapo</a>

et le JS est celui-ci:

<!-- debut script scrolltolight -->
	<script type="text/javascript">
		$('#gotodiapo').click(function(){
			var the_href = $(this).attr("href");
			var taille_href = the_href.length;
			var pos_diese = the_href.indexOf("#");
			var nom_ancre = the_href.substr(pos_diese);
			$('html, body').animate({
				scrollTop:$(nom_ancre).offset().top
			}, 'slow');
			return false;
		});
	</script>
<!-- fin script scrolltolight -->

il doit sûrement y avoir pus simple

Stéphane · novembre 2012

Salut
Essaye avec ça

<a href="<?php $plxShow->urlRewrite('#ancre') ?>">Aller à l'ancre</a>

danielsan · novembre 2012

merci mais ça ne change rien ... petite précision: le lien est placé dans le template.

Jerry Wham · novembre 2012

Un id sera toujours plus fiable pour faire fonctionner le js (le code sera portable et ne dépendra pas d'une url changeante d'un projet à l'autre). Et si js est désactivé, alors l'ancre prend tout son sens et amène ton visiteur à l'endroit voulu. Donc je dirais que le fonctionnement que tu décris est normal et que ta proposition avec l'id est la meilleure.

Ça respecte la sémantique et le rôle premier de l'ancre et du lien et le javascript n'est ainsi pas intrusif.

danielsan · novembre 2012

hello Jerry,

justement la première proposition est un code générique où l'on se fiche de l'identifiant du lien puisqu'il est basé sur l'adresse du lien qui est elle-même associé à l'identifiant de l'ancre ...

<a href="#diapo">Aller au diapo</a>

...

<div id="diapo">Le diapo</div>

pb lien ancre

Réponses