stackoom
  简体   繁体   中英

JavaScript scrollTo method does nothing?

 原文  2009-07-23 22:34:37  0   21    javascript/ jquery/ dom

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!

21 answers

solution1
 93  2013-09-02 12:42:13

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

solution2
 36  2015-10-24 16:06:38

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

solution3
 28 ACCPTED  2009-07-29 21:16:54

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.

solution4
 22  2017-12-27 07:58:22

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

solution5
 11  2019-10-08 17:04:27

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

solution6
 6  2019-06-28 19:57:45

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

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

solution7
 5  2022-02-25 03:45:56

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.

solution8
 3  2019-08-21 05:02:55

对我来说，将 html 和 body 的高度设置为 auto 就成功了。

html, body { height: auto }

solution9
 3  2020-08-11 16:34:57

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

solution10
 3  2020-12-04 20:49:58

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.

solution11
 3  2011-07-19 03:15:00

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.

solution12
 1  2016-09-21 01:12:49

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

solution13
 1  2020-11-10 10:16:17

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.

solution14
 1  2020-12-15 23:07:15

document.body.scrollTo(0, 800)这解决了我的问题。

solution15
 0  2009-07-24 13:16:49

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.

solution16
 0  2020-05-14 20:40:10

如果向下滑动后滚动已经完成，它应该等待div完成这样的动画

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

solution17
 0  2020-12-18 07:58:12

使用 onunload 属性对我有用

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

solution18
 0  2021-06-23 12:00:14

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

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

solution19
 0  2021-12-23 16:55:24

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

solution20
 -2  2019-02-21 04:20:25

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

solution21
 -3  2009-07-23 23:09:55

Well obviously it won't scroll if your page is not at least (viewport.height - 800) tall. Do you see a scroll bar? Otherwise you are doing something else wrong.

solution22
 -3  2009-07-24 12:12:47

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.

暂无
暂无

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

Related Question scrollTo() function does nothing WKWebView javascript method click() does nothing Trying to write javascript function to animate scrollTo method Javascript ScrollTo does not work on page load javascript for scrollTo Array method that does nothing If statement does nothing javascript How to assign x, y dinamic values to scrollTo() method in Javascript? window.scrollTo method doesn't work everytime - JavaScript Why does this script not execute scrollTo(x,y) javascript?
Related Tags
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM