Javascript / CSS window.scrollTo(0,0) not working

Question

I am building a web app, and part of that web app needs to scroll to the top when an action is performed. This is handled using window.scrollTo(0,0) which works perfectly until I add some CSS styling below (which I require for this project).

Has anybody got any idea why the CSS below would stop window.scrollTo(0,0) working?

* {
    -webkit-transform: translate3d(0,0,0);
    -moz-transform: translate3d(0,0,0);
    -ms-transform: translate3d(0,0,0);
    -o-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
}

P.S. I cannot use jQuery in my situation, just in case it's suggested that I do that.

use jQuery :) No, I tried what you said, and it works with me on FF, Chrome and IE. Can you post some more code? — roel, Jan 31 '13 at 10:24
If you're using material design sidenav see my answer here: http://stackoverflow.com/a/43710010/2146647 — Tyson, Apr 30 '17 at 18:48
try wrapping your `window.scrollTo(0, 0) inside a setTimeout, that works for me — medhatdawoud, Jan 22 '19 at 10:57

score 35 · Answer 1 · edited Jul 29 '16 at 10:21

35

I had the same problem, this fixed it:

document.getElementById('ELEMENT_ID').scrollIntoView();

Where ELEMENT_ID is the id of the object you want to scroll into view, in your case it would typically be the header.

Note this only works fully on Firefox browsers as the other browsers have yet to implement the smooth scrolling option (see more: http://caniuse.com/#feat=scrollintoview).

edited Jul 29 '16 at 10:21

BlueEyesWhiteDragon

427
1
6
20

answered Jun 12 '14 at 18:42

Josue Alexander Ibarra

8,269
3
30
37

1

Thanks, this is the only solution that worked for me. I now just need to work out how to nudge the scroll position down a little so that I can see the scrolled to element on the screen clearly. – MikeyBunny Sep 13 '16 at 08:55
Thanks! it works where the container is using 100vh – Sabre Sep 07 '21 at 19:48
I can get the element but the scroll is not working. – Luis Alfredo Serrano Díaz Jan 22 '22 at 16:47

score 14 · Answer 2 · answered Jan 31 '13 at 10:20

14

Try the alternative :

document.body.scrollTop = 0;

answered Jan 31 '13 at 10:20

basarat

261,912
58
460
511

score 10 · Answer 3 · answered Jan 07 '15 at 16:21

10

I my case removing this block fixed the issue

html, body {
  overflow-x: hidden;
}

answered Jan 07 '15 at 16:21

Dima

1,045
14
23

1

I also had an issue having a container element with 100vh and I had to remove it. – pearpages Nov 26 '17 at 20:27
4

@Dima I have the same issue but I can't remove this above block. What shall I do? any suggestions? – khush Jul 26 '18 at 09:56
2

@khush did you solve the issue? I'm running in the same problem where I can't remove the overflow-x: hidden – João Silva Oct 10 '19 at 10:26

score 5 · Answer 4 · answered Jan 31 '13 at 12:42

5

Turns out there was not a set height on the main element in the body, which meant scroll to wasnt working however the transition CSS was giving the element height automatically in webkit.... Fixed the CSS to give it a set height and it works again!

answered Jan 31 '13 at 12:42

user1873468

477
1
4
11

Just had an issue with scrollTo not working, also down to the height not being set on the body element. Thanks for posting your final solution – Phil Ostler Jan 14 '14 at 12:22

score 1 · Answer 5 · answered May 20 '20 at 05:16

1

Changing

html, body {
  overflow-x: hidden;
}

to

body {
  overflow-x: hidden;
}

worked for me

answered May 20 '20 at 05:16

reubano

5,087
1
42
41

score 1 · Answer 6 · answered May 15 '22 at 01:31

1

I had this same issue recently in a Gatsby project. I had tried wrapping in setTimeout with no success.

What ended up working for me was window.scrollTo(0, -1).

answered May 15 '22 at 01:31

jfgilmore

73
8

score 0 · Answer 7 · edited Sep 02 '22 at 18:14

0

I found also that adding the following CSS caused the window.scroll() and window.scrollTo() methods to have no effect.

body {
    scroll-behavior: smooth;
}

edited Sep 02 '22 at 18:14

Oleg Barabanov

2,468
2
8
17

answered Aug 29 '22 at 21:05

Travis Collins

36
3

score 0 · Answer 8 · answered Jan 04 '23 at 20:23

0

Adding to @basarat's answer. It worked perfectly!

I did it in React, but in a function it's working and has smooth scroll.

    const scrollToTop = () => {
      document.body.scrollTo({ top: 0, behavior: "smooth" });
   };

answered Jan 04 '23 at 20:23

Nethol

1

Javascript / CSS window.scrollTo(0,0) not working

8 Answers8

Linked