JavaScript scrollTo method does nothing?

Question

So I am desperatley trying to get some scrolling functionality to work on a page. After not having a luck I decide to just stick window.scrollTo(0, 800); on my page to see if I could get any scrolling to happen. Nothing does happen. I have an accordion that expands and then I want to scroll to a specific element with in it. But for now I would be happy to just see the thing scroll at all. Anyone run into this?

Thanks!

user_56256 · Answer

I was able to resolve this problem using jQuery method animate(). Here is an example of the implementation I went with:

$('#content').animate({ scrollTop: elementOffset }, 200);

The selector is getting the div with ID = "content". I am then applying the animate method on it with scrollTop as an option. The second parameter is the time in milliseconds for the animation duration. I hope this helps someone else.

user_6141025 · Answer

This happened to me yesterday because I had overflow: auto on a div that was a child to and .

So I learned that for window.scrollTo() to work, you must have overflow: auto (or whatever, overflow-y: scroll) set on the element.

I learned that for document.body.scrollTo() to work, you must have overflow set on .

I learned you can also use it on any other element (if you want) using document.querySelector('#some-container').scrollTo().

In my case, I wanted window.scrollTo() to work, so I put the overflow CSS on .

I'm surprised no other answers in here talk about "exactly which" element is scrollable. The root html element must be scrollable for window.scrollTo() to work. All my child elements downstream of are set to height: auto.

My CSS is like this:

html { position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: auto; }
body { width: 100%; height: auto; }
#app { width: 100%; height: auto; }

user_11715327 · Answer

I had this same problem.Focusing window before scrollTo worked for me.

window.focus();
window.scrollTo(0,800);

user_4663980 · Answer

For me setting the height of html and body to auto did the trick.

html, body { height: auto }

user_6363451 · Answer

TL;DR

document.querySelector('#dummy_element').scrollIntoView()

worked for me.

Explanation

I too was having an issue with the following

document.querySelector('#some-container').scrollTo()

window.scrollTo()

as @agm1984 mentioned here:

I then tried using:document.querySelector('#dummy_element').scrollIntoView()

that worked out for me.

Differences are explained here in a better way.

Quick difference:

Element.scrollIntoView() method scrolls the element on which it's called into the Viewport of the browser window.

Window.scrollTo() method scrolls to a particular set of coordinates in the document.

user_125032 · Answer

This is what I do on React, as I have a root element, as the first and outer most div on my page, I scroll to the top of that element.

      const root = document.getElementById('root');
      root.scrollTo({
        top: 0,
        left: 0,
        behavior: 'smooth',
      });

user_491553 · Answer

I had this problem and it had nothing to do with these answers. The problem for me first appeared after upgrading to Bootstrap 4 which converted a lot of my divs over to display: flex. It turns out JQuery's scrollTop() doesn't work so well with flex layouts.

The solution for me was to change my old code from:

$("#someId").scrollTop(1000);

// or

$("#someId").animate({ scrollTop: 1000 }, 500);

to

$("html,#someId").scrollTop(1000);

// or

$("html,#someId").animate({ scrollTop: 1000 }, 500);

The only difference is adding in the "html," before the div that needs to scroll.

Props to this issue for helping me figure it out.

user_558972 · Answer

In a React app, wrapping window.scrollTo with a setTimeout worked.

useEffect(() => {
  if (scrollPosition > 0) {
    setTimeout(() => window.scrollTo(0, scrollPosition), 0);
    setScrollPosition(0);
  }
}, [scrollPosition]);

user_4047341 · Answer

In my case: window.scrollBy(0,200); is working.

I have no idea WHY window.scrollTo(0,200); is not working and window.scrollBy(0,200); is working.

user_11670058 · Answer

document.body.scrollTo(0, 800) This solved my issue.

user_10815727 · Answer

If for some reason both

   html,body {overflow: hidden}

have to be set, you could still scroll programatically with:

   document.body.scrollTop = document.body.scrollHeight; // scrolls to bottom
   document.body.scrollTop = 0; // scrolls to top

user_50214 · Answer

First, is you page even big enough to scroll (even if it's in an iframe)? If not, or you aren't sure, make a giant div, then put something below it. Try scrolling to that.

Next, if your scrolling in an iframe, put your code on the same page as the frame source. That way you don't have to worry about getting the document or specific element in the other window, which can be tricky. Oh yeah, are you sure you are getting that part right? Stepping through with Firebug can help you with that.

Finally, put a breakpoint (using Firebug) on the line that is supposed to cause the scrolling to happen. Does it hit that breakpoint? If not, your code is not executing, and scrolling is not your problem.

(I answered this, with supporting context from your earlier question.)

EDIT:

Scrolling is done window by window. If you are in a frame that can't scroll, then nothing will scroll. If you want that element in the frame to be scrolled to, get the offset of that element to its current window and add it to the offset of the containing frame. That should do the trick.

user_1126621 · Answer

If the scrolling has been done after a slide down, it should wait for the div to complete the animation like this

$('#div-manual-lots').slideDown(200, function () { $("html, body").animate({ scrollTop: $(document).height() }, 1000) });

user_5314622 · Answer

Using the onunload property worked for me

window.onunload = function(){ window.scrollTo(0,0); }

user_2994954 · Answer

When window.scrollTo(x,y) does not work on the console of the Browser, and the dom gets rendered after scroll, you can use this.

To scroll on Splash or any javascript rendering service execute below js:

document.body.style.height = "2000px";
window.scrollTo(0,2000);

In Splash you can do something similar to this:

  assert(splash:wait(10))
  assert(splash:runjs("document.body.style.height = '2000px';"))
    assert(splash:runjs("window.scrollTo(0,2000);"))
  assert(splash:wait(2))
  assert(splash:runjs("window.scrollTo(0,0);"))

user_315650 · Answer

Take this code: http://www.java2s.com/Code/JavaScriptReference/Javascript-Methods/scrollToExample.htm and save as an html file. Note how it hard codes a very large div larger than the browser's viewport. You probably need to add a content at the bottom of your page for the scrolling to even work.

JavaScript scrollTo method does nothing?

21 Answers