Unable to scroll to the top of the page with JavaScript

Question

Unable to scroll to the top of the page with JavaScript

I tried the code below but it didn't quite do the trick. Can someone assist me with refreshing the page to the top every time it loads?

window.addEventListener('load', function(){
   window.scrollTo(0,0)
})

window.onload = (event) => {
   window.scrollTo(0,0)
};

javascript

Answer 1

Answer №1

Your script is effective when the page does not load at the top

For instance, if a user clicks the back button or if the page loads with an ID in the URL hash

You have the option to eliminate the onload and instead include the script directly at the end of the page

window.addEventListener('load', function(){
   window.scrollTo(0,0)
})

div { height: 500px; background-color: yellow; }

<div>Div 1</div>
<div>Div</div>
<div>Div</div>
<div>Div</div>
<div>Div</div>
<div>Div</div>
<div>Div</div>
<div>Div</div>
<div>Div</div>
<div>Div</div>
<div>Div</div>
<div>Div</div>
<div>Div</div>
<div>Div</div>
<div>Div</div>
<div>Div</div>
<div>Div</div>
<div id="x">Last Div</div>
<script>
 // mimicking the scenario where the page does not load at the top, unrelated to the answer
 document.getElementById("x").scrollIntoView(); //while loading
 
 // insert window.scrollTo(0,0) here if needed
 
</script>

Answer 2

Your script is effective when the page does not load at the top

For instance, if a user clicks the back button or if the page loads with an ID in the URL hash

You have the option to eliminate the onload and instead include the script directly at the end of the page

window.addEventListener('load', function(){
   window.scrollTo(0,0)
})

div { height: 500px; background-color: yellow; }

<div>Div 1</div>
<div>Div</div>
<div>Div</div>
<div>Div</div>
<div>Div</div>
<div>Div</div>
<div>Div</div>
<div>Div</div>
<div>Div</div>
<div>Div</div>
<div>Div</div>
<div>Div</div>
<div>Div</div>
<div>Div</div>
<div>Div</div>
<div>Div</div>
<div>Div</div>
<div id="x">Last Div</div>
<script>
 // mimicking the scenario where the page does not load at the top, unrelated to the answer
 document.getElementById("x").scrollIntoView(); //while loading
 
 // insert window.scrollTo(0,0) here if needed
 
</script>

Answer 3

Answer №2

Why not give this code a try instead of using window.scrollTo(0,0):

document.body.scrollTop = document.documentElement.scrollTop = 0;

Update your code to:

window.addEventListener('load', function(){
    document.body.scrollTop = document.documentElement.scrollTop = 0;
})

window.onload = (event) => {
   document.body.scrollTop = document.documentElement.scrollTop = 0;
};

Answer 4

Why not give this code a try instead of using window.scrollTo(0,0):

document.body.scrollTop = document.documentElement.scrollTop = 0;

Update your code to:

window.addEventListener('load', function(){
    document.body.scrollTop = document.documentElement.scrollTop = 0;
})

window.onload = (event) => {
   document.body.scrollTop = document.documentElement.scrollTop = 0;
};

Unable to scroll to the top of the page with JavaScript

Answer №1

Answer №2

Similar questions

utilize JavaScript on every element that has a specific identifier

Exploring the process of transforming a dynamic PDF into a static PDF using PHP or NodeJS

What is the method for concatenating two strings in JavaScript without any whitespace in between?

Adjust the canvas size to fit its parent element ion-grid

Using Selenium in JavaScript to upload an image is a straightforward process

Grid Column with Checkboxes in Kendo UI for Vue

bespoke HTML elements and properties

What is the best way to fill in the jquery treeselect widget?

`18n implementation in Node.js and front-end JavaScript for localization`

What is the best way to display JSON data in a readable format?

Using Axios to retrieve data from a MySQL database is a common practice in web development. By integrating Vue

The variable remains undefined, despite the fact that the code executes correctly in a different location

What is the best way to transfer a JavaScript variable value from an HTML page to a Model variable within the controller?

Resources for Vue.js stylesheets

Tips on ensuring data cleanliness in jQuery input fields

Iterate over the HTML elements within a class and retrieve a specific property in JSON

Can phantomJS be used to interact with elements in protractor by clicking on them?

Guide to placing the Drawer component beneath the AppBar in Material-UI

What is the process for reverting back to a previous version using n (Node Version Manager)?

Using React.js to Retrieve Data from the Server without AJAX Calls