Bonjour,
J'ai une page qui a 2 ancres.
J'ai voulu faire en sorte que quand on clic sur les ancres, le défilement de l'écran se fasse progressivement, plutôt que : "d'un coup BAM on arrive sur l'ancre".
J'ai écris quelques lignes jQuery et ça fonctionne bien :
// si on clic sur un lien qui commence par "#" (donc, qui est une ancre)
$('a[href^="#"]').on('click', function(e) {
// variables
var itself = $( this );
var duration;
// définie la durée de l'animation
if (itself.html() == 'Nous découvrir') // 1ère ancre
{
duration = 1000;
}
else // comme l'autre ancre est beaucoup plus loin dans la page, je fais durer l'animation plus longtemps pour que ça ne défile pas trop vite.
{
duration = 2000;
}
// définit la "cible" jusqu'où aller
var target = $( itself.attr('href') );
// fait défiler l'écran jusqu'à l'ancre
$(' body ').animate({
scrollTop: target.offset().top
}, duration);
});
Mon problème :
Ça fonctionne sur Firefox, mais PAS sur Chrome et Opera.
Et incroyable : fonctionne sur IE.
J'ai mes navigateurs à jour.
Chrome => version 51 (stable)
Opera => version 38 (stable)
Sur stackOverflow je vois plein de réponses qui semblent fonctionner pour tout le monde, mais pas chez moi...
Dont celle-ci qui à eu 66 votes +1
Try using $("html,body").animate({ scrollTop: 0 }, "slow");
lien : http://stackoverflow.com/questions/3042651/jquery-scrolltop-not-working-in-chrome-but-working-in-firefox
j'ai essayé d'utiliser :
$(' body ').animate({
$(' html, body ').animate({
$(' html ').animate({
$(document).animate({
$(window).animate({
...
Si vous pouvez m'aider, Merci.