Browsers tend to restore the last scroll position on page reload. The precise moment at which they do that is hard to determine, and it may vary from browser to browser. Therefore, simply scrolling back to top on "DOM ready" or page load event might not guarantee it. This is why, in this article, we will show you ways in which you can ensure that the browser always scrolls to the top when the page refreshes.

Using history.scrollRestoration

The JavaScript history API has the scrollRestoration property, which when set to manual, prevents the last scroll location on the page to be restored. You can use it in the following way:

history.scrollRestoration = 'manual';

For , you could create a fallback to using window.onbeforeunload, for example, in the following way:

if (history.scrollRestoration) {

history.scrollRestoration = 'manual';

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

Using window.onbeforeunload

Before the page unloads, we can change the scroll position to the top of the page. This would change the browser's last scroll position, and when the page refreshes it would start at the top of the page. For example:

window.onbeforeunload = function () {

window.scrollTo(0, 0);

This post was published 29 Oct, 2020 by Daniyal Hamid. Daniyal currently works as the Head of Engineering in Germany and has 20+ years of experience in software engineering, design and marketing.

Below is the effect, and you can notice it jumps to the page-top straight away without any smooth effect.

Basic CSS solution for jump to the top of page

2. CSS Solution with Smooth Scrolling

If you want it to smooth scroll up to the top, you can do that in CSS if you like:

html { scroll-behavior: smooth; }

Here is the result with a smooth scrolling effect.

CSS solution with scroll-behavior for jump to the top of page

However, make sure that you are aware of not all browser supports scroll-behavior

scroll-behavior browser support

JavaScript Solution

You might need to trigger scrolling with JavaScript, in which case here are some options:

1. window.scrollTo()
2. document.documentElement.scrollTop()
3. window.scroll()
4. document.documentElement.scrollIntoView()

1. window.scrollTo()

window.scrollTo(0, 0) is a sure bet to scroll the window (or any other element) back to the top. The scrolling behavior of that is determined by CSS as well.

Learn how to create a "scroll back to top" button with CSS.

Try it Yourself »

How To Create a Scroll To Top Button

Step 1) Add HTML:

Create a button that will take the user to the top of the page when clicked on:

Example

Top

Step 2) Add CSS:

Style the button:

Example

myBtn {

display: none; /* Hidden by default */ position: fixed; /* Fixed/sticky position */ bottom: 20px; /* Place the button at the bottom of the page */ right: 30px; /* Place the button 30px from the right */ z-index: 99; /* Make sure it does not overlap */ border: none; /* Remove borders */ outline: none; /* Remove outline */ background-color: red; /* Set a background color */ color: white; /* Text color */ cursor: pointer; /* Add a mouse pointer on hover */ padding: 15px; /* Some padding */ border-radius: 10px; /* Rounded corners */ font-size: 18px; /* Increase font size */ }

myBtn:hover {

background-color:

555; /* Add a dark-grey background on hover */

}

Step 3) Add JavaScript:

Example

// Get the button: let mybutton = document.getElementById("myBtn");

// When the user scrolls down 20px from the top of the document, show the button window.onscroll = function() {scrollFunction()};

function scrollFunction() { if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) { mybutton.style.display = "block"; } else { mybutton.style.display = "none"; } }

// When the user clicks on the button, scroll to the top of the document function topFunction() { document.body.scrollTop = 0; // For Safari document.documentElement.scrollTop = 0; // For Chrome, Firefox, IE and Opera }

Try it Yourself »

★ +1

How to scrollTo the top when page loads in JavaScript?

To make the page jump on the top instantly can be done with the native JavaScript method, namely — window. scrollTo(x-coord, y-coord) . This property of the window interface scrolls to a particular set of coordinates in the document.

How to scrollTo top of screen in JavaScript?

If you don't need the change to animate then you don't need to use any special plugins - I'd just use the native JavaScript window. scrollTo() method -- passing in 0, 0 will scroll the page to the top left instantly. xCoord is the pixel along the horizontal axis.

How to scrollTo the top using JavaScript?

You might need to trigger scrolling with JavaScript, in which case here are some options:.

window. scrollTo().

document. documentElement. scrollTop().

window. scroll().

document. documentElement. scrollIntoView().

How do you move the scrollTo the top in JavaScript?

The scrollTo() method of the window Interface can be used to scroll to a specified location on the page. It accepts 2 parameters the x and y coordinate of the page to scroll to. Passing both the parameters as 0 will scroll the page to the topmost and leftmost points.