18041 sujets

Questions générales et questions de débutants

Comment s'appelle un lien qui positionne dans une page.

Bien le bonjour à tous,

Je recherche un code ou un sujet qui traite d'un "bouton" ou "lien" qui permet par exemple de positionner le lecteur à un endroit précis d'une page.

En gros des liens en haut de page qui renvois sur cette même page à une position précise en verticale .

Cordialement.
Oui je veux parler d'un positionneur sur une même page. tu as plusieurs liens en haut qui te renvois sur un contenu ou un paragraphe en particulier, j'ai trouver un scrolltop mais ça ne ramène le scroll simplement en haut.


Link 1 , link 2



Contenu 1

Contenu 2
Bon comme je suis un prince je partage un tuto vidéo Smiley cligne et je félicite la réactivité du forum.

-http://www.grafikart.fr/tutoriels/jquery/scrolling-anime-44

PS: si si c'est vrai ! Profitez de mon liens
Modifié par Laurie-Anne (05 Oct 2011 - 13:54)
Bonjour,

Comme l'a dit Agylus, il s'agit bel et bien d'ancres vers lesquelles pointent des liens.

Cela fonctionne sans faire appel à jQuery ou à une quelconque autre librairie, mais si tu veux ajouter des effets, jQuery est tout à fait indiqué.

Cordialement
Justement J'ai ceci dans le code :


$(document).ready(function(){
	$('a[href^=#]').click(function(){
	 cible=$(this).attr('href);
	 if($(cible).length>=1){
	 	hauteur=$(cible).offset().top;
	 }
	 else{
	 	hauteur=$("a[name="+cible.substr(1,cible.length-1)+"]").offset().top;
	 }
	 $('html,body').animate({scrollTop:hauteur},1000,'easeOutQuint');
	 return false;
	 	
	});
});



la ligne avec "1000,'easeOutQuint' devrais me donner un effet ralenti mais rien ne se fait. Une erreur ?
Modifié par coco_Nuts62 (05 Oct 2011 - 16:44)
Si tu veux un système d'ancre animé, c'est à dire sans le "jump" direct à l'endroit désiré, utilises scrollTo.js.

Récupères le ici, je l'utilise actuellement, donc pompe le via mon serveur.

Et au niveau de ton head, insère un code de ce genre:

    $("#ton_selecteur").click(function(){
        $.scrollTo( $('#ta_destination'), 800 );
    });


Par exemple:

    $("tr").click(function(){
        $.scrollTo( $('#description'), 800 );
    });


Ce qui correspond à un click sur une ligne de tableau pour avoir un deroulement naturel mais automatique jusqu'à ma <div id="description">

En espérant que ce soit ce que tu recherches.
Merci pour ton code mais idem pas d'effet ralenti, tu avais bien compris ce que je voulais.

dans le head :

<script src="java/jquery.js" type="text/javascript"></script>
<script src="java/effect.js" type="text/javascript"></script>

<script src="" type="text/javascript">
$("top").click(function(){

        $.scrollTo( $('#top'), 800 );

    });
</script>



mes liens :

<a href="#top">
<img id="hautdepage" src="img/hautdepage.png" title="" alt="remonter" />
</a>

<div id="top"></div>




une erreur ? ancre fonctionne bien correctement juste manque effet.
Modifié par coco_Nuts62 (06 Oct 2011 - 11:32)
je remplace par des quotes ?



je vais me faire ça sur une page vierge test sans wordpress.
Modifié par coco_Nuts62 (06 Oct 2011 - 13:54)
non...


$("#ton_selecteur").click(function(){

        $.scrollTo( $('#ta_destination'), 800 );
        return false;
    });




<a href="#top" id="ton_selecteur">
<img src="img/hautdepage.png" title="" alt="remonter" />

</a>

<div id="ta_destination"></div>

Modifié par Belkira (06 Oct 2011 - 14:16)
Bon et bien c'est simple après des recherches fastidieuses lol.

Le problème : En bref ça ne marche pas sur une div, enfin coder comme cela.

<div id="top">en haut</div>
..............le site web, contenu
<a href="#top">Retour</a>


Il faut obligatoirement si on désire l'effet 2 ancres en <a href"...."> et pas "id" mais un "name"



<a name="top">en haut</a>
..............le site web, contenu
<a href="#top">Retour</a>



avec ce fichier en header qui vas convertir toutes les encres en effect.

<script src="java/smooth.pack.js" type="text/javascript"></script>

Adresse du fichier :

smooth.pack.js
Modifié par coco_Nuts62 (06 Oct 2011 - 14:30)
Si tu souhaites faire un retour en haut de page avec scrollTo, il suffisait de mettre:


$('#selecteur').click(function() {
	$('body,html').animate({scrollTop:0},800);
});


Donc pour ton cas personnel, ça donne:

$('#top').click(function() {
	$('body,html').animate({scrollTop:0},800);
});


Avec en lien:


<div id="top">
      <img id="hautdepage" src="img/hautdepage.png" title="" alt="remonter" />
</div>


Dans le code que tu as fournis après ma reponse, tu as mal fait appel à ton id avec ton selecteur, tu as mis "top" et non "#top". C'est un id, il te faut donc le prénom de #.
Hello!

Voici quelque chose que j'ai adapté à partir d'un script trouvé sur CCM.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
    <title>Scrolling doux vers les ancres</title>
	<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
    <script type="text/javascript">
	//<![CDATA[
    $(function(){
        $('a[href*=#]').click(function() { 
        if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
			var $target = $(this.hash); 
			$target = $target.length && $target || $('[name=' + this.hash.slice(1) +']'); 
			if ($target.length) { 
				var targetOffset = $target.offset().top - 60; // - 60 = margin-top du .contenu (modifiable)
				$('html,body').animate({scrollTop: targetOffset}, 1200); // 1200 = vitesse de scrolling (modifiable)
				return false; 
			} 
        } 
        }); 
    }); 
    //]]>
   </script>
    <style type="text/css">
	/*<![CDATA[*/
	body {
		background-color: #f4f4f4;
		font: normal 14px arial,verdana,helvetica,sans-serif;
		color: #000;
	}
	.menu {
		position:fixed; 
		margin:0; 
		top:0; 
		left: 0; 
		font-size: 150%; 
		background-color:#000; 
		width:100%; 
		padding: 5px 0 5px 0; 
		text-align: center
	}
	.menu a:link {
		color: #fff; 
		text-decoration: none;
		margin-left: 10px; 
		margin-right: 10px
	}
	.menu a:hover {
		color: aqua;
	}
	.contenu {
	margin: 60px 0 0 100px 
	}
	.div-debut, .div-milieu, .div-fin {
		padding: 15px;
		margin-top: 20px
	}
	.div-debut {
		height: 650px;
		background-color: #eaeaea
	}
	.div-milieu {
		height: 700px;
		background-color: #c4c4c4
	}
	.div-fin {
		height: 500px;
		background-color: #e0e0e0
	}
	.spacer {
		height: 500px;
	}
    /*]]>*/
    </style>
  </head>
  <body>
    <div class="menu">
      <a href="#debut">Début</a> 
	  <a href="#milieu">Milieu</a> 
	  <a href="#fin">Fin</a>
    </div>
    <div class="contenu">
      <div class="div-debut"><a name="debut"><b>DEBUT</b></a></div>
      <div class="div-milieu"><a name="milieu"><b>MILIEU</b></a></div>
      <div class="div-fin"><a name="fin"><b>FIN</b></a></div>
	  <div class="spacer">&nbsp;</div><!--[  pour amener le titre du "div-fin" près du menu  ]-->
    </div>
  </body>
</html>
<!--[  Script inspiré de :  http://www.commentcamarche.net/forum/affich-19190758-ancres-jquery   ]-->

C'est peut-être l'effet que tu recherches?
Cordialement.
Sujet clos
Aller à