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

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

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

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

"The Node.js program is unable to access the contents of the browser.js file when loaded in

After spending an unreasonable amount of time trying to debug this issue, I am still unable to resolve it. Currently, I am following a udemy tutorial where the instructor implements the same code provided below. However, despite my efforts, the code is not ...

Can the Automator tool capture a specific section of a website in a screenshot?

Is it possible to use automator to navigate through a store's website category and open each product in a new tab? Alternatively, is there a software that can extract all the product URLs from a specific website? For example, this website has 14 prod ...

Combining the powers of Nextjs and Vue

Currently utilizing Vue.js, I am now looking to leverage the Next.js framework for its SEO capabilities, server-side rendering features, and other advantages. While I do have some experience with React, my primary focus is on mastering Vue.js. Is it poss ...

I'm having trouble sending a string to a WCF service using jQuery AJAX. What's preventing me from sending strings of numbers?

Something strange is happening with my web service when using jquery ajax - I can only pass strings containing numbers. This was never an issue before as I would always just pass IDs to my wcf service. But now that I'm trying something more complex, I ...

Loader successfully resolving deep array references

My schema is structured as follows: type User{ id: String! name: String posts: [Post] } type Post { id: String! userId: String body: String } I'm utilizing Facebook's dataloader to batch the request. query { GetAllUser { id ...

JavaScript enables logging on Android Emulator

Currently, I am working with an Ionic app that is connected to SalesForce Mobile SDK. Due to the lack of support for the SDK and certain plugins in Ionic Serve, I have resorted to running the app in Android Studio using an Emulator - specifically, the Andr ...

Troubles with setting up slash commands in discord.js v13

I am encountering an issue while trying to deploy a slash command. The error message DiscordAPIError[50035] is displayed, stating "Invalid Form Body guild_id[NUMBER_TYPE_COERCE]: Value \"undefined\" is not snowflake." const path = require('n ...

What is the process for populating dropdown options from state?

I've been struggling to populate a select element with options based on an array in state. Despite trying various methods, the code snippet below seems to be the most detailed (I'm still getting familiar with React after taking a break for a few ...

mention a numerical value/heading within a JSON list

I encountered an issue while searching through a JSON array filled with Google fonts. The fonts are structured by family -> files -> filename. However, I noticed that sometimes the filename is saved as a number. For example (refer to the bottom of th ...

Using a restricted set of special characters in a jQuery regular expression

My requirement is to only allow alphanumeric data along with the following special characters: ' (single quote) - (hyphen) . (dot) single space I attempted this approach: var userinput = $(this).val(); var pattern = [A-Za-z0-9_~\-!@#\$% ...

The optimal method for loading CSS and Javascript from an ajax response within a JavaScript function - Ensuring cross-browser compatibility

I am in a situation where I need jQuery to make sense of an ajax response, but due to latency reasons, I cannot load jQuery on page load. My goal is to be able to dynamically load javascipt and css whenever this ajax call is made. After reading numerous a ...

Unable to launch React Native project on emulator now

Something seems off with my App as it won't start up on my AS Emulator. Everything was running smoothly yesterday, but today it's not working - possibly due to me moving the npm and npm-cache folders, although they are configured correctly with n ...

Tips for incorporating the "define" function into your Mocha testing

Starting my journey with JavaScript testing, I made the decision to use Mocha. The specific modules I am looking to test are AMD/RequireJS. However, it appears that Mocha only works with CommonJS modules. Consequently, when trying to run it, I encounter t ...

Utilizing VueJS and Lodash: The technique for extracting an array of objects exclusively featuring a specific key string

I am attempting to extract certain data from an Object that has a string _new attached to it. Explore the code on Codesandbox: https://codesandbox.io/s/vibrant-bardeen-77so1u?file=/src/components/Lodash.vue:0-353 This is what my data looks like: data.j ...

Encountering issues with connecting to the MongoDB server through Node.js

When working with MongoDB in Python, everything runs smoothly without any errors. However, when using Node.js, an error keeps popping up. Can someone please guide me on how to resolve this issue? jdcaovuwqxoqppwwqmjcawpwuaciwowjqwqhpaiwdoqi Below is the ...

Locate a deeply nested element within an array of objects using a specific string identifier

Trying to search for an object in an array with a matching value as a string can be achieved with the following code snippet. Is there an alternative method to optimize this process without utilizing map? Code: const arr = [{ label: 'A', ...

Angular2 - Transforming SVG elements with dynamic styles using ng-style

I'm trying to create SVG lines using ng-repeat and need to adjust the translation of each line. However, I'm having trouble getting the style to apply using ng-attr-style. my-component.js: import {Component} from 'angular2/core'; @Co ...

What is the best way to track and display the window.scrollY value in the console using Next.js

Unfortunately, my ScrollToTop component is not functioning correctly within my app. I have exhausted all possible debugging methods but am still unable to determine why the scrollY value is not being logged as expected. Even after moving the snippet to a ...

Using async/await with Fetch to send POST parameters for text/html content

Is there a way to POST parameters for content type text/html without sending it as an object? In my specific scenario, I need to include extra data that is not part of a form and is read from a cookie. When posting with body : {} or body: JSON.Stringify( ...

My Discord bot powered by Discord.js is being unresponsive to commands

Hello, I'm facing a major issue with my command handler that I've been struggling with for a while now. The problem is that my bot doesn't respond when I try to use a command. I've tried various methods from YouTube but none of them see ...