ScrollTop toujours à zéro

Version imprimable

26/02/2014, 12h55
thenaoh

ScrollTop toujours à zéro

Bonjour,

Je souhaite faire un simple bouton permettant à l'utilisateur de revenir en haut de la page avec une animation, comme on en voit souvent. J'ai essayé avec plusieurs tutos (par exemple : celui-ci), mais sans succès.

En effet, la valeur scrollTop de ma page (window, html, body) est toujours à 0, même si je fais défiler ma page, dans le cas où j'ai spécifié le style css height: 100% pour les éléments html et body. Or ce style m'est nécessaire pour l'affichage du footer de mes pages, qui doit toujours rester en bas.

2 possibilités :
- Y a-t-il un moyen de faire revenir ma page en haut, avec ce style css sur les éléments html et body ?
ou :
- Est-il possible de faire un footer toujours en bas de page, sans utiliser ce style css ?

Merci par avance pour votre aide ! ;)
26/02/2014, 13h29
SpaceFrog

peux on voir le code de tentative de récupération du scrollTop ?
quel est l'element scrollé ?

http://jsfiddle.net/4z9js/
26/02/2014, 14h26
thenaoh
Code:

1 2 3 4 5 $(function() { $('#boutonRemonter').click(function() { alert($(window).scrollTop()); }); }
Ce code semble fonctionner sur tous les navigateurs (du moins ceux que j'avais sous la main, à savoir IE, Firefox, Chrome et Safari), tant que je ne mets pas le style "height: 100%" sur les éléments html, body.

Sauf que j'ai besoin de mettre ce style css ...

Une idée ? :)
26/02/2014, 14h28
SpaceFrog

avec quel doctype ?
26/02/2014, 14h30
thenaoh

doctype : <!DOCTYPE HTML>
26/02/2014, 14h39
SpaceFrog

n'aurais tu pas un overflow declaré ?
26/02/2014, 14h50
thenaoh

Bravo, bien vu, j'ai effectivement "overflow-x: hidden;" sur html, body ! Et ça marche quand on l'enlève !

Seulement, j'aurais aimé le garder pour éviter quelques artefacts lorsque je redimensionne ma fenêtre (responsive oblige).
Comment cela se fait-il que ça ne marche pas si on garde ce style css ? Y a-t-il un moyen de faire avec ?

Merci !
26/02/2014, 15h13
SpaceFrog

au premier abord je dirais qu'a part en capsuler ton body dans un div et faire le scrollTop sur le div, je ne voi spas comment procéder autrement
26/02/2014, 15h32
Bovino

Code:

alert($(window).scrollTop());

Ca n'a aucun sens cette ligne... :no:

D'une part, $(window) est un objet jQuery, tu ne peux donc pas lui appliquer de méthode d'un objet DOM.
Ensuite, scrollTop est une propriété, pas une méthode, on ne l'appelle donc pas comme une fonction.
Enfin, scrollTop n'est pas supposé renvoyer de valeur, donc faire un alert() ne correspond à rien...
26/02/2014, 16h05
thenaoh

@SpaceFrog : Merci, je vais continuer à chercher.
@Bovino : concernant tes 2 dernières remarques, je suis bien d'accord avec toi, j'étais tout autant surpris que toi que ça fonctionne comme ça, car oui, ça fonctionne...
26/02/2014, 16h15
Bovino

Euh... non, rassure-toi, c'est moi qui ai dû un peu trop abuser de substances alcoolisées ce midi. Du coup, je raconte n'importe quoi. :cry:

Bref, scrollTop() est bien une méthode jQuery censée retourner la valeur du scroll pour l'élément jQuery (et tant qu'à dire des conneries, si, la propriété JavaScript éponyme est bien supposée renvoyer un résultat :mrgreen:).

Au temps pour moi... :calim2:
26/02/2014, 16h21
thenaoh

@Bovino : Pas de souci ! ;)

Quoi qu'il en soit, je ne comprends toujours pas pourquoi un "overflow-x: hidden" vient gêner le fonctionnement d'un scrollTop (qui agit donc sur les y) ...

To be continued !
26/02/2014, 17h29
thenaoh

Bon finalement, je vais retirer le "overflow-x: hidden" (qui était une rustine à un autre problème que je viens de résoudre).
Du coup, ça marche mieux :)
Merci !!