animate(scrollTop) sur Chrome et Opera

SLK
Javascript

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.

9 réponses

PhiSyX
Réponse acceptée

Enlève les propriétés CSS height: 100%; overflow: hidden; de ton selecteur html ^^

Si tu pouvais remplacer le CSS (Compass) par le CSS généré/final, je pense que ça serait mieux pour nous ^^
(oui tout le monde n'a pas compass :p)

AlexJM

Alors, pense à faire e.preventDefault() pour pas qu'il passe directement à l'ancre, et sinon chez moi ça fonctionne sur tous les navigateurs (safari et chrome) (et si tu veux qu'il mette quand même dans la barre de navigation le #..., tu peux manipuler l'historique https://developer.mozilla.org/fr/docs/Web/Guide/DOM/Manipuler_historique_du_navigateur)

SLK
Auteur

Coucou Alex,

Au début j'avais le prevent.Default(), mais quand j'ai testé sur Chrome et Opera, et que j'ai vu que ça ne bougeait PAS DU TOUT, j'ai enlevé le prevent.Default :

  • ça n'a rien changé pour Firefox (fonctionne toujours)
  • pour Chrome et Opera, ça leur a au moins permis d'aller jusqu'à l'ancre (y aller "d'un coup", à défaut d'y aller "progressivement").

Si je le remet :

  • ne change rien pour FireFox
  • Chrome et Opera ne bougent plus du tout, ils ne vont pas jusqu'à l'ancre, ils restent sur place.

C'est bizarre...

AlexJM

Tu saurais faire un JSFiddle ou quelque chose de ce genre ?

SLK
Auteur

Je n'avais encore jamais utilisé.
C'est pratique !

J'ai copié/collé le code.

Maintenant je vois "Collaborate", et j'ai un lien pour "inviter un ami" :
https://jsfiddle.net/wgoubfua/#&togetherjs=NBjHKKmcFA

Je ne sais pas si c'est comme ça qu'on procède normalement...

Je ne sais pas trop si ça va être utile parce-que le CSS est un vrai BORDEL
(c'est un site de test, et je n'ai pas fait très attention...)
Et j'utilise COMPASS, c'est pour ça qu'on voit des "@include ...", des variables, du CSS imbriqué...

brokleen

yo rien à voir mais tu peux optimiser ton code :

    var itself = $( this );
    var duration = 2000;
    // définie la durée de l'animation
    if (itself.html() == 'Nous découvrir') // 1ère ancre
    {
        duration = 1000;
    }
SLK
Auteur

Ouais, merci.

AlexJM

https://codepen.io/alexjmvv/pen/pbyjyE

J'arrive pas à voir la différence :/

Edit : c'est ton css qui fait bug

SLK
Auteur

Ah bien vu, effectivement quand j'enlève le [overflow: hidden;]() du [html]() :

  • le scrolling sur les ancre fonctionne sur Chrome et OPERA
  • MAIS détruit l'aspect du site
  • et le scrolling sur les ancres ne fonctionne PLUS sur Firefox

En fait j'essaie de faire une page de présentation, avec effet parallax, en pur CSS.
Et pour faire ça j'ai BESOIN du [overflow: hidden;]() sur [html]()

En tous cas c'était bien vu, merci. Mais maintenant que je sais que ce qui fait buguer Chrome et Opera c'est une propriété dont je ne peut pas me passer (je crois), j'ai l'impression que je ne vais pas m'en sortir là...
Je vais peut-être laisser comme ça alors... Zut.

Et pour ce qui est du CSS généré, bon sang je suis trop bête j'y ai même pas pensé quoi xD (je l'ai changé)