Ancre douce
Résolu
Dan
-
geekman01 -
geekman01 -
Bonjour,
Cette fonction ( http://www.htmlzengarden.com/2009/10/ancres_et_deplacement_progressif_de_l_ascenseur/#comment-10430 ) m'intéresse beaucoup mais, ne maîtrisant pas parfaitement la création web je me permets de demander si quelqu'un aurait l'amabilité de m'expliquer brièvement comment l'insérer dans le code html d'une page. Faut-il télécharger un fichier .js ?
Merci
Cette fonction ( http://www.htmlzengarden.com/2009/10/ancres_et_deplacement_progressif_de_l_ascenseur/#comment-10430 ) m'intéresse beaucoup mais, ne maîtrisant pas parfaitement la création web je me permets de demander si quelqu'un aurait l'amabilité de m'expliquer brièvement comment l'insérer dans le code html d'une page. Faut-il télécharger un fichier .js ?
Merci
5 réponses
Merci,
Que dois-je faire mainteant une fois que j'ai ce code brut :
var scrolling = function(){
var speed = 1000;
jQuery('a[href^="#"]').bind('click',function(){
var id = jQuery(this).attr('href');
if(id == '#')
goTo('body');
else
goTo(id);
return(false);
});
function goTo(ancre){jQuery('html,body').animate({scrollTop:jQuery(ancre).offset().top},speed,'swing',function(){
if(ancre != 'body')
window.location.hash = ancre;
else
window.location.hash = '#';
jQuery(ancre).attr('tabindex','-1');
jQuery(ancre).focus();
jQuery(ancre).removeAttr('tabindex');
});
}
};
et que j'ai placé le fichier jquery.js dans la racine de mon site ?
Que dois-je faire mainteant une fois que j'ai ce code brut :
var scrolling = function(){
var speed = 1000;
jQuery('a[href^="#"]').bind('click',function(){
var id = jQuery(this).attr('href');
if(id == '#')
goTo('body');
else
goTo(id);
return(false);
});
function goTo(ancre){jQuery('html,body').animate({scrollTop:jQuery(ancre).offset().top},speed,'swing',function(){
if(ancre != 'body')
window.location.hash = ancre;
else
window.location.hash = '#';
jQuery(ancre).attr('tabindex','-1');
jQuery(ancre).focus();
jQuery(ancre).removeAttr('tabindex');
});
}
};
et que j'ai placé le fichier jquery.js dans la racine de mon site ?
ben c'est un fichier *.js ... oui !
donc le code JS utilise une des propriétés de Jquery:
et doit donc être intégré à la page bien sur ;)
tu as d'ailleurs un exemple qui t'es donné sur ce même post :
http://www.htmlzengarden.com/scrolling.html
(regarde le code source de cette page et tu auras tout compris ...)
en un peu plus 'sophistiqué' tu as aussi bien d'autres exemples de variantes:
- ici sur CCM les flèches qui sont sur la droite pour remonter
- sur mon blog : https://longuetraine.fr/
la petite 'pastille' "return to top" qui apparait en bas quand on commence à descendre dans une page ...
ça fait quand même plus sympa qu'un simple flèche, style 'cliquez ici pour remonter' ....
;)
le 'www' est fait aussi pour communiquer, partager et échanger, non ?
merci d'avoir la politesse de répondre à ceux qui essaient de vous aider
Il permet lors de l'activation d'une ancre de déplacer progressivement l'ascenseur de la page en fonction. J'aime personnellement beaucoup cet effet car je trouve qu'il rend plus compréhensible l'utilisation des ancres.
donc le code JS utilise une des propriétés de Jquery:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js"></script> <script type="text/javascript"> var scrolling = function(){ var speed = 2000; jQuery('a[href^="#"]').bind('click',function(){ var id = jQuery(this).attr('href'); if(id == '#') goTo('body'); else goTo(id); return(false); void(0); }); function goTo(ancre){jQuery('html,body').animate({scrollTop:jQuery(ancre).offset().top},speed,'swing',function(){ if(ancre != 'body') window.location.hash = ancre; else window.location.hash = '#'; jQuery(ancre).attr('tabindex','-1'); jQuery(ancre).focus(); jQuery(ancre).removeAttr('tabindex'); }); } }; jQuery(function(){ scrolling(); }); </script>
et doit donc être intégré à la page bien sur ;)
tu as d'ailleurs un exemple qui t'es donné sur ce même post :
http://www.htmlzengarden.com/scrolling.html
(regarde le code source de cette page et tu auras tout compris ...)
en un peu plus 'sophistiqué' tu as aussi bien d'autres exemples de variantes:
- ici sur CCM les flèches qui sont sur la droite pour remonter
- sur mon blog : https://longuetraine.fr/
la petite 'pastille' "return to top" qui apparait en bas quand on commence à descendre dans une page ...
ça fait quand même plus sympa qu'un simple flèche, style 'cliquez ici pour remonter' ....
;)
le 'www' est fait aussi pour communiquer, partager et échanger, non ?
merci d'avoir la politesse de répondre à ceux qui essaient de vous aider
Merci beaucoup, ca fonctionne très bien à un détail pret, existe-til un moyen pour que l'élément vers lequel nous a conduit le lien se centre dans l'écran lorsque l'on y arrive ?
Sachant que je travaille sur une page très grande, à la fois verticalement et horizontalement, faite d'éléments épars et d'un menu fixe quant à lui qui permet d'accéder à ces éléments sans jamais changer de page.
Sachant que je travaille sur une page très grande, à la fois verticalement et horizontalement, faite d'éléments épars et d'un menu fixe quant à lui qui permet d'accéder à ces éléments sans jamais changer de page.
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question