How to scroll to top of page with JavaScript/jQuery?
JavascriptJqueryHtmlScrollJavascript Problem Overview
Is there a way to control browser scrolling with JavaScript/jQuery?
When I scroll my page half way down, then trigger a reload, I want the page to go pack to the top, but instead it tries to find the last scroll position. So I did this:
$('document').ready(function() {
$(window).scrollTop(0);
});
But no luck.
EDIT:
So both your answers worked when I call them after the page loads-Thanks. However, if I just do a refresh on the page, looks like the browser calculates and scrolls to its old scroll position AFTER the .ready event (I tested the body onload() function too).
So the follow up is, is there a way to PREVENT the browser scrolling to its past position, or to re-scroll to the top AFTER it does its thing?
Javascript Solutions
Solution 1 - Javascript
Cross-browser, pure JavaScript solution:
document.body.scrollTop = document.documentElement.scrollTop = 0;
Solution 2 - Javascript
You almost got it - you need to set the scrollTop on body, not window:
$(function() {
$('body').scrollTop(0);
});
EDIT:
Maybe you can add a blank anchor to the top of the page:
$(function() {
$('<a name="top"/>').insertBefore($('body').children().eq(0));
window.location.hash = 'top';
});
Solution 3 - Javascript
Wow, I'm 9 years late to this question. Here you go:
Add this code to your onload.
// This prevents the page from scrolling down to where it was previously.
if ('scrollRestoration' in history) {
history.scrollRestoration = 'manual';
}
// This is needed if the user scrolls down during page load and you want to make sure the page is scrolled to the top once it's fully loaded. This has Cross-browser support.
window.scrollTo(0,0);
To run it on window load just put it wrap it like this (assumes you have JQuery referenced)
$(function() {
// put the code here
});
history.scrollRestoration Browser support:
Chrome: supported (since 46)
Firefox: supported (since 46)
Edge: supported (since 79)
IE: not supported
Opera: supported (since 33)
Safari: supported
For IE if you want to re-scroll to the top AFTER it autoscrolls down then this worked for me:
var isIE11 = !!window.MSInputMethodContext && !!document.documentMode;
if(isIE11) {
setTimeout(function(){ window.scrollTo(0, 0); }, 300); // adjust time according to your page. The better solution would be to possibly tie into some event and trigger once the autoscrolling goes to the top.
}
Solution 4 - Javascript
UPDATE
Going to top of the page with a scroll effect is a bit more easier in javascript now with:
https://developer.mozilla.org/en-US/docs/Web/API/Window/scroll
There are 2 ways to use scroll API.
This is the method I recommend. Using an option object:
window.scroll(options)
This is a better option since you can define a behavior prop which applies a built-in easing animation.
window.scroll({
top: 0,
left: 0,
behavior: 'smooth'
});
The other method is to use an x and y coordinates.
window.scroll(x-coord, y-coord)
x-coord - is the pixel along the horizontal axis of the document that you want displayed in the upper left.
y-coord - is the pixel along the vertical axis of the document that you want displayed in the upper left.
OLD ANSWER DO NOT USE
This is our vanilla javascript implementation. It has a simple easing effect so that the user doesn't get shocked after clicking the To Top button.
Its very small and gets even smaller when minified. Devs looking for an alternative to the jquery method but want the same results can try this.
JS
document.querySelector("#to-top").addEventListener("click", function(){
var toTopInterval = setInterval(function(){
var supportedScrollTop = document.body.scrollTop > 0 ? document.body : document.documentElement;
if (supportedScrollTop.scrollTop > 0) {
supportedScrollTop.scrollTop = supportedScrollTop.scrollTop - 50;
}
if (supportedScrollTop.scrollTop < 1) {
clearInterval(toTopInterval);
}
}, 10);
},false);
HTML
<button id="to-top">To Top</button>
Cheers!
Solution 5 - Javascript
> Is there a way to PREVENT the browser > scrolling to its past position, or to > re-scroll to the top AFTER it does its > thing?
The following jquery solution works for me:
$(window).unload(function() {
$('body').scrollTop(0);
});
Solution 6 - Javascript
Here's a pure JavaScript animated scroll version for no-jQuery'ers :D
var stepTime = 20;
var docBody = document.body;
var focElem = document.documentElement;
var scrollAnimationStep = function (initPos, stepAmount) {
var newPos = initPos - stepAmount > 0 ? initPos - stepAmount : 0;
docBody.scrollTop = focElem.scrollTop = newPos;
newPos && setTimeout(function () {
scrollAnimationStep(newPos, stepAmount);
}, stepTime);
}
var scrollTopAnimated = function (speed) {
var topOffset = docBody.scrollTop || focElem.scrollTop;
var stepAmount = topOffset;
speed && (stepAmount = (topOffset * stepTime)/speed);
scrollAnimationStep(topOffset, stepAmount);
};
And then:
<button onclick="scrollTopAnimated(1000)">Scroll Top</button>
Solution 7 - Javascript
This works for me:
window.onload = function() {
// short timeout
setTimeout(function() {
$(document.body).scrollTop(0);
}, 15);
};
Uses a short setTimeout inside the onload to give the browser a chance to do the scroll.
Solution 8 - Javascript
You can use with jQuery
jQuery(window).load(function(){
jQuery("html,body").animate({scrollTop: 100}, 1000);
});
Solution 9 - Javascript
Use the following function
window.scrollTo(xpos, ypos)
Here xpos is Required. The coordinate to scroll to, along the x-axis (horizontal), in pixels
ypos is also Required. The coordinate to scroll to, along the y-axis (vertical), in pixels
Solution 10 - Javascript
$(function() {
// the element inside of which we want to scroll
var $elem = $('#content');
// show the buttons
$('#nav_up').fadeIn('slow');
$('#nav_down').fadeIn('slow');
// whenever we scroll fade out both buttons
$(window).bind('scrollstart', function(){
$('#nav_up,#nav_down').stop().animate({'opacity':'0.2'});
});
// ... and whenever we stop scrolling fade in both buttons
$(window).bind('scrollstop', function(){
$('#nav_up,#nav_down').stop().animate({'opacity':'1'});
});
// clicking the "down" button will make the page scroll to the $elem's height
$('#nav_down').click(
function (e) {
$('html, body').animate({scrollTop: $elem.height()}, 800);
}
);
// clicking the "up" button will make the page scroll to the top of the page
$('#nav_up').click(
function (e) {
$('html, body').animate({scrollTop: '0px'}, 800);
}
);
});
Use This
Solution 11 - Javascript
The following code works in Firefox, Chrome and Safari, but I was unable to test this in Internet Explorer. Can someone test it, and then edit my answer or comment on it?
$(document).scrollTop(0);
Solution 12 - Javascript
document.body.scrollIntoView({behavior: "smooth"});
Works with every browser including IE (older browsers don't support smooth scrolling).
Solution 13 - Javascript
Why don't you just use some reference element at the very beginning of your html file, like
<div id="top"></div>
and then, when the page loads, simply do
$(document).ready(function(){
top.location.href = '#top';
});
If the browser scrolls after this function fires, you simply do
$(window).load(function(){
top.location.href = '#top';
});
Solution 14 - Javascript
My pure (animated) Javascript solution:
function gototop() {
if (window.scrollY>0) {
window.scrollTo(0,window.scrollY-20)
setTimeout("gototop()",10)
}
}
Explanation:
window.scrollY is a variable maintained by the browser of the amount of pixels from the top that the window has been scrolled by.
window.scrollTo(x,y) is a function that scrolls the window a specific amount of pixels on the x axis and on the y axis.
Thus, window.scrollTo(0,window.scrollY-20) moves the page 20 pixels towards the top.
The setTimeout calls the function again in 10 milliseconds so that we can then move it another 20 pixels (animated), and the if statement checks if we still need to scroll.
Solution 15 - Javascript
In my case body didn't worked:
$('body').scrollTop(0);
But HTML worked:
$('html').scrollTop(0);
Solution 16 - Javascript
Cross-browser scroll to top:
if($('body').scrollTop()>0){
$('body').scrollTop(0); //Chrome,Safari
}else{
if($('html').scrollTop()>0){ //IE, FF
$('html').scrollTop(0);
}
}
Cross-browser scroll to an element with id = div_id:
if($('body').scrollTop()>$('#div_id').offset().top){
$('body').scrollTop($('#div_id').offset().top); //Chrome,Safari
}else{
if($('html').scrollTop()>$('#div_id').offset().top){ //IE, FF
$('html').scrollTop($('#div_id').offset().top);
}
}
Solution 17 - Javascript
If you're in quircks mode (thanks @Niet the Dark Absol):
document.body.scrollTop = document.documentElement.scrollTop = 0;
If you're in strict mode:
document.documentElement.scrollTop = 0;
No need for jQuery here.
Solution 18 - Javascript
To answer your edited-in question, you could register the onscroll handler like so:
document.documentElement.onscroll = document.body.onscroll = function() {
this.scrollTop = 0;
this.onscroll = null;
}
This will make it so that the first attempt at scrolling (which is likely the automatic one done by the browser) will be effectively cancelled.
Solution 19 - Javascript
This is working:
jQuery(document).ready(function() {
jQuery("html").animate({ scrollTop: 0 }, "fast");
});
Solution 20 - Javascript
Combination of these two helped me. None of the other answers helped me since i had a sidenav that was not scrolling.
setTimeout(function () {
window.scroll({
top: 0,
left: 0,
behavior: 'smooth'
});
document.body.scrollTop = document.documentElement.scrollTop = 0;
}, 15);
Solution 21 - Javascript
var totop = $('#totop');
totop.click(function(){
$('html, body').stop(true,true).animate({scrollTop:0}, 1000);
return false;
});
$(window).scroll(function(){
if ($(this).scrollTop() > 100){
totop.fadeIn();
}else{
totop.fadeOut();
}
});
<img id="totop" src="img/arrow_up.png" title="Click to go Up" style="display:none;position:fixed;bottom:10px;right:10px;cursor:pointer;cursor:hand;"/>
Solution 22 - Javascript
without animation, just scroll(0, 0) (vanilla JS)
Solution 23 - Javascript
If anyone is using angular and material design with sidenav. This will send you to to the top of the page:
let ele = document.getElementsByClassName('md-sidenav-content');
let eleArray = <Element[]>Array.prototype.slice.call(ele);
eleArray.map( val => {
val.scrollTop = document.documentElement.scrollTop = 0;
});
Solution 24 - Javascript
Seeint the hash should do the job. If you have a header, you can use
window.location.href = "#headerid";
otherwise, the # alone will work
window.location.href = "#";
And as it get written into the url, it'll stay if you refresh.
In fact, you don't event need JavaScript for that if you want to do it on an onclick event, you should just put a link arround you element and give it # as href.
Solution 25 - Javascript
First add a blank anchor tag to the place where you want to go
<a href="#topAnchor"></a>
Now add a function in header section
function GoToTop() {
var urllocation = location.href;
if (urllocation.indexOf("#topAnchor") > -1) {
window.location.hash = "topAnchor";
} else {
return false;
}
}
finally add an onload event to the body tag
<body onload="GoToTop()">
Solution 26 - Javascript
A generic version that works for any X and Y value, and is the same as the window.scrollTo api, just with the addition of scrollDuration.
A generic version matching the window.scrollTo browser api*
function smoothScrollTo(x, y, scrollDuration) {
x = Math.abs(x || 0);
y = Math.abs(y || 0);
scrollDuration = scrollDuration || 1500;
var currentScrollY = window.scrollY,
currentScrollX = window.scrollX,
dirY = y > currentScrollY ? 1 : -1,
dirX = x > currentScrollX ? 1 : -1,
tick = 16.6667, // 1000 / 60
scrollStep = Math.PI / ( scrollDuration / tick ),
cosParameterY = currentScrollY / 2,
cosParameterX = currentScrollX / 2,
scrollCount = 0,
scrollMargin;
function step() {
scrollCount = scrollCount + 1;
if ( window.scrollX !== x ) {
scrollMargin = cosParameterX + dirX * cosParameterX * Math.cos( scrollCount * scrollStep );
window.scrollTo( 0, ( currentScrollX - scrollMargin ) );
}
if ( window.scrollY !== y ) {
scrollMargin = cosParameterY + dirY * cosParameterY * Math.cos( scrollCount * scrollStep );
window.scrollTo( 0, ( currentScrollY - scrollMargin ) );
}
if (window.scrollX !== x || window.scrollY !== y) {
requestAnimationFrame(step);
}
}
step();
}
Solution 27 - Javascript
<script>
sessionStorage.scrollDirection = 1;//create a session variable
var pageScroll = function() {
window.scrollBy ({
top: sessionStorage.scrollDirection,
left: 0,
behavior: 'smooth'
});
if($(window).scrollTop() + $(window).height() > $(document).height() - 1)
{
sessionStorage.scrollDirection= Number(sessionStorage.scrollDirection )-300;
setTimeout(pageScroll,50);//
}
else{
sessionStorage.scrollDirection=Number(sessionStorage.scrollDirection )+1
setTimeout(pageScroll,300);
}
};
pageScroll();
</script>
Solution 28 - Javascript
I remember seeing this posted somewhere else (I couldn't find where), but this works really well:
setTimeout(() => {
window.scrollTo(0, 0);
}, 0);
It's weird, but the way it works is based off of the way JavaScript's stack queue works. The full explanation is found here in the Zero Delays section.
The basic idea is that the time for setTimeout doesn't actually specify the set amount of time it will wait, but the minimum amount of time it will wait. So when you tell it to wait 0ms, the browser runs all the other queued processes (like scrolling the window to where you were last) and then executes the callback.