JavaScript scrollTo method does nothing?

Javascript Problem Overview

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!

Javascript Solutions

Solution 1 - Javascript

If you have something like this:

html, body { height: 100%; overflow:auto; }

If both body and html have a height definition of 100% and also scrolling enabled, window.scrollTo (and all derived scrolling mechanisms) do not work, despite a scrollbar being displayed (which can be used by the user), when the contents exceed that 100% body height. This is because the scrollbar you see is not that of the window, but that of the body.

Solution:

html { height: 100%; overflow:auto; }
body { height: 100%; }

Solution 2 - Javascript

I fixed this problem with using a setTimout. I was using angularjs but maybe it can help in vanilla js too.

        setTimeout(function () {
            window.scrollTo(0, 300);
        },2);

Solution 3 - Javascript

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.

Solution 4 - Javascript

Sometimes it's not just the CSS issue, for me the browser was the culprit. I had to solve it with this code:

if ('scrollRestoration' in window.history) {
  window.history.scrollRestoration = 'manual'
}

It lets developer take the ownership of scroll changes. Read more about it here

Solution 5 - Javascript

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

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

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

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

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 <html> 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; }

Solution 6 - Javascript

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

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

Solution 7 - Javascript

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

html, body { height: auto }

Solution 8 - Javascript

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',
      });

Solution 9 - Javascript

I was having this same problem today and then I discovered that when I took out the auto generated doctype block:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

The window.scrollTo(0,800) started working along with the ExtJs scrollTo() function I was originally trying to use. I put the block back in and it stopped working. I don't know if this is what you were running into (2 years ago) but hopefully this helps someone else running into the same problem.

Solution 10 - Javascript

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);

$("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.

Solution 11 - Javascript

check if your tag where is plugged your scroll get a CSS overflow[/-x-y] : hidden. it fixed the bug

Solution 12 - Javascript

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.

Solution 13 - Javascript

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

Solution 14 - Javascript

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

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

Solution 15 - Javascript

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

Solution 16 - Javascript

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.

Solution 17 - Javascript

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) });

Solution 18 - Javascript

Using the onunload property worked for me

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

Solution 19 - Javascript

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.

Solution 20 - Javascript

>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);"))

Solution 21 - Javascript

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.

Content Type	Original Author	Original Content on Stackoverflow
Question	Nick	View Question on Stackoverflow
Solution 1 - Javascript	frevd	View Answer on Stackoverflow
Solution 2 - Javascript	Vince Verhoeven	View Answer on Stackoverflow
Solution 3 - Javascript	Nick	View Answer on Stackoverflow
Solution 4 - Javascript	Bikal Basnet	View Answer on Stackoverflow
Solution 5 - Javascript	agm1984	View Answer on Stackoverflow
Solution 6 - Javascript	bth_	View Answer on Stackoverflow
Solution 7 - Javascript	Asim Mahar	View Answer on Stackoverflow
Solution 8 - Javascript	hazimdikenli	View Answer on Stackoverflow
Solution 9 - Javascript	Jerry West	View Answer on Stackoverflow
Solution 10 - Javascript	Ryan Shillington	View Answer on Stackoverflow
Solution 11 - Javascript	marcdahan	View Answer on Stackoverflow
Solution 12 - Javascript	Ahmad Sayeed	View Answer on Stackoverflow
Solution 13 - Javascript	Shinu Mathew	View Answer on Stackoverflow
Solution 14 - Javascript	vijayst	View Answer on Stackoverflow
Solution 15 - Javascript	Milan Dala	View Answer on Stackoverflow
Solution 16 - Javascript	geowa4	View Answer on Stackoverflow
Solution 17 - Javascript	Saaram	View Answer on Stackoverflow
Solution 18 - Javascript	Rami Nour	View Answer on Stackoverflow
Solution 19 - Javascript	Jay	View Answer on Stackoverflow
Solution 20 - Javascript	Rajan	View Answer on Stackoverflow
Solution 21 - Javascript	Christopher Tokar	View Answer on Stackoverflow