Ancre douce
Résolu/Fermé5 réponses
pitxu
Messages postés
689
Date d'inscription
vendredi 7 septembre 2007
Statut
Membre
Dernière intervention
25 mars 2015
94
30 janv. 2012 à 14:51
30 janv. 2012 à 14:51
Bonjour,
oui il faut utiliser la librairie javascript JQuery -> https://jquery.com/
oui il faut utiliser la librairie javascript JQuery -> https://jquery.com/
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 ?
bg62
Messages postés
23590
Date d'inscription
samedi 22 octobre 2005
Statut
Modérateur
Dernière intervention
15 avril 2024
2 362
Modifié par bg62 le 30/01/2012 à 15:10
Modifié par bg62 le 30/01/2012 à 15:10
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.
bg62
Messages postés
23590
Date d'inscription
samedi 22 octobre 2005
Statut
Modérateur
Dernière intervention
15 avril 2024
2 362
30 janv. 2012 à 16:50
30 janv. 2012 à 16:50
avec ce script là ça posera problème .... il vaudrait d'ailleurs mieux revoir tes pages (surtout en largeur) au niveau de la css pour garder une certaine 'uniformité' et de conception et de présentation ... et de fonctionnement du script ...
bg62
Messages postés
23590
Date d'inscription
samedi 22 octobre 2005
Statut
Modérateur
Dernière intervention
15 avril 2024
2 362
30 janv. 2012 à 18:50
30 janv. 2012 à 18:50
pourquoi pas ... juste à introduire qq paramètres de + avec JQuery :)
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question