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!
javascriptjquerydom
Share
Improve this question
Follow
edited Feb 8, 2010 at 20:11
Dan McGrath's user avatar
Dan McGrath
42.1k1111 gold badges103103 silver badges130130 bronze badges
asked Jul 23, 2009 at 22:34
Nick's user avatar
Nick
19.7k5353 gold badges190190 silver badges313313 bronze badges
I should note that I have tried the scrollTo JQuery plugin without any luck there as well. $.scrollTo(0,800); –
Nick
CommentedJul 23, 2009 at 22:35
3
In firefox in my address bar i just put javascript:window.scrollTo(0, 800); and it seemed to work. –
Davis
CommentedJul 23, 2009 at 22:44
ok, a. try it in different browsers, see if it works in any. b. try something like document.body.scrollTo. c. remember that javascript is case sensitive. Not sure if any of those will help, but you can try. –
Nico Burns
CommentedJul 23, 2009 at 22:44
1
scrollTo does do something, just not on your page... I'm guessing you will get little help without posting a url, your code, or at least providing some more details about your specific issue. –
Prestaul
CommentedJul 23, 2009 at 22:58
1
Horrible question. You provide no code, and we have no idea when your code is executing (if at all). –
Josh Stodola
CommentedJul 23, 2009 at 23:09
Show 3 more comments
25 Answers
Sorted by:
Highest score (default)
134
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%; }
Share
Improve this answer
Follow
edited Sep 2, 2013 at 13:01
answered Sep 2, 2013 at 12:42
frevd's user avatar
frevd
1,35722 gold badges88 silver badges33 bronze badges
20
To follow up here (many years later!), if you don't want to change your CSS in this case, you can instead use document.body.scrollTo({ top: ... }) instead of window.scrollTo. –
btown
CommentedJul 19, 2022 at 12:40
@btown thanx for saving my hrs –
Navin SK
CommentedAug 12, 2022 at 13:07
1
@btown thanks but it still doesn't work for me. ` document.body.scrollTo({ behavior: 'auto', left: 0, top: 0, });` does not scroll on top of the page.. –
Kristi Jorgji
CommentedFeb 13, 2023 at 10:12
1
@KristiJorgji make sure it's actually the body that is scrolling when you scroll. It's possible you have another height: 100% component inside it that's actually the thing that is scrolling. Feel free to create a new question if you're still having issues! –
btown
CommentedFeb 14, 2023 at 18:16
Add a comment
59
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);
Share
Improve this answer
Follow
answered Oct 24, 2015 at 16:06
Vince Verhoeven's user avatar
Vince Verhoeven
1,8031616 silver badges2626 bronze badges
6
2 milliseconds did not work for me, but 200 did. Thanks! –
Giampaolo Ferradini
CommentedFeb 1, 2020 at 2:54
2
You saved me master –
Freddy
CommentedMar 9, 2021 at 22:53
I used it and worked, but on slow networks it doesn't work any more. –
Mina Soleimanzadeh
CommentedSep 28, 2021 at 8:56
4
It works, but can anyone explain why? –
MartijnvdB
CommentedAug 9, 2022 at 9:45
5
@JaberAlNahian the reason is that in some cases the document is still rendering, by adding a small delay its done loading and ready to scroll –
Vince Verhoeven
CommentedFeb 23, 2023 at 9:33
Show 5 more comments
31
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
Share
Improve this answer
Follow
edited Sep 11, 2020 at 10:33
Dan Knights's user avatar
Dan Knights
8,40844 gold badges2828 silver badges5555 bronze badges
answered Dec 27, 2017 at 7:58
Bikal Basnet's user avatar
Bikal Basnet
1,74911 gold badge2121 silver badges3131 bronze badges
Add a comment
29
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.
Share
Improve this answer
Follow
answered Jul 29, 2009 at 21:16
Nick's user avatar
Nick
19.7k5353 gold badges190190 silver badges313313 bronze badges
2
I tried the other answers. This is the only one that worked for me too. Difference is I used $('body').animate({ scrollTop: top }, 0); where top is the variable containing the y-coordinate in integer. –
Kim Stacks
CommentedNov 6, 2013 at 5:01
@KimStacks A duration of 0 didn't work for me, but using 1 did.. can't believe how hard this is to do! –
Arth
CommentedJul 6, 2018 at 16:06
Add a comment
21
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; }
Kim Stacks
CommentedNov 6, 2013 at 5:01
@KimStacks A duration of 0 didn't work for me, but using 1 did.. can't believe how hard this is to do! –
Arth
CommentedJul 6, 2018 at 16:06
Add a comment
21
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; }
Kim Stacks
CommentedNov 6, 2013 at 5:01
@KimStacks A duration of 0 didn't work for me, but using 1 did.. can't believe how hard this is to do! –
Arth
CommentedJul 6, 2018 at 16:06
Add a comment
21
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; }
Kim Stacks
CommentedNov 6, 2013 at 5:01
@KimStacks A duration of 0 didn't work for me, but using 1 did.. can't believe how hard this is to do! –
Arth
CommentedJul 6, 2018 at 16:06
Add a comment
21
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; }
2 days agofactionmanager27commented...
Its been 3 years since I started modding battle cats.
But today all i see is BUGS, PROBLEMS, and I cant even have 10k Subscribers.
I lost monetization as well,
what else should inspire me continuing???
Republic of the PhilippinesRank 1 Li'l cat
2 days agofactionmanager27commented...
Its been 3 years since I started modding battle cats.
But today all i see is BUGS, PROBLEMS, and I cant even have 10k Subscribers.
I lost monetization as well,
what else should inspire me continuing???
Republic of the PhilippinesRank 1 Li'l cat
2 days agofactionmanager27commented...
Its been 3 years since I started modding battle cats.
But today all i see is BUGS, PROBLEMS, and I cant even have 10k Subscribers.
I lost monetization as well,
what else should inspire me continuing???
Republic of the PhilippinesRank 1 Li'l cat
2 days agofactionmanager27commented...
Its been 3 years since I started modding battle cats.
But today all i see is BUGS, PROBLEMS, and I cant even have 10k Subscribers.
I lost monetization as well,
what else should inspire me continuing???
Republic of the PhilippinesRank 1 Li'l cat
2 days agofactionmanager27commented...
Its been 3 years since I started modding battle cats.
But today all i see is BUGS, PROBLEMS, and I cant even have 10k Subscribers.
Discord
Mods
Request Account
How to Download
BCU Pack
Community
Giveaways
2 days ago
...
...
Its been 3 years since I started modding battle cats.
But today all i see is BUGS, PROBLEMS, and I cant even have 10k Subscribers.
I lost monetization as well,
what else should inspire me continuing???