pb lien ancre

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

Réponses

  • 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 :D
  • StéphaneStéphane Member, Former PluXml Project Manager
    Salut
    Essaye avec ça
    <a href="<?php $plxShow->urlRewrite('#ancre') ?>">Aller à l'ancre</a>
    

    Consultant PluXml

    Ancien responsable du projet (2010 à 2018)

  • merci mais ça ne change rien ... petite précision: le lien est placé dans le template.
  • 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.
  • 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>
    
Connectez-vous ou Inscrivez-vous pour répondre.