ScrollTop toujours à zéro

**thenaoh** · 26/02/2014, 12h55

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 !

**SpaceFrog** · 26/02/2014, 13h29

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

http://jsfiddle.net/4z9js/

**thenaoh** · 26/02/2014, 14h26

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 ?

**SpaceFrog** · 26/02/2014, 14h28

avec quel doctype ?

**thenaoh** · 26/02/2014, 14h30

doctype : <!DOCTYPE HTML>

**SpaceFrog** · 26/02/2014, 14h39

n'aurais tu pas un overflow declaré ?

**thenaoh** · 26/02/2014, 14h50

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 !

**SpaceFrog** · 26/02/2014, 15h13

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

**Bovino** · 26/02/2014, 15h32

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

Ca n'a aucun sens cette ligne...

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...

**thenaoh** · 26/02/2014, 16h05

@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...

**Bovino** · 26/02/2014, 16h15

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.

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

).

Au temps pour moi...

**thenaoh** · 26/02/2014, 16h21

@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 !

**thenaoh** · 26/02/2014, 17h29

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 !!

ScrollTop toujours à zéro

jQuery

Discussions similaires

Partager

Partager