Scroll to top on page load in Vue

I've integrated Gridsome into my portfolio website. However, I've encountered an issue where on mobile or tablet devices with longer pages, Firefox fails to scroll back to the top when navigating. Interestingly, this problem doesn't occur in Google Chrome.

To address this, I've implemented the following code snippet to ensure the page scrolls to the top:

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

Despite experimenting with different solutions, none have proven effective so far. I'm determined to find a resolution without relying on jQuery for this specific issue.

javascriptvue.jsonbeforeunloadgridsomejs-scrollto

Answer №1

After some troubleshooting, I discovered a workaround that may not be perfect but it gets the job done. Try setting the Y value to either 1 or 2 as Firefox appears to struggle with a value of 0.

window.scrollTo(0, 2);

Answer №2

To modify your router setup, do the following:

const router = new VueRouter({
  routes: [...],
  scrollBehavior (to, from, savedPosition) {
    return { x: 0, y: 0 }
  }
})

This code snippet ensures that scrolling to the top occurs whenever there is a change in the route.

In case you are not utilizing vue-router, insert this code into the mounted() hook of your component.

setTimeout(() => {
  document.body.scrollTop = document.documentElement.scrollTop = 0;
}, 500);

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

Error: Unable to resolve Vue dependencies

Currently, I am in the process of developing a Laravel application with Vite bundling. Within this Laravel setup, I am incorporating a package that contains Vue components. Below is my vite.config.js: import laravel from 'laravel-vite-plugin'; i ...

laravelvue.jsvitelaravel-9

When external API validation fails, the JavaScript form is submitted

I am working on implementing form validation using an external email validation API. Below is the form tag I am using: <form class="form-horizontal" role="form" onsubmit="return validateForm()" method="post"> Here is a snippet of my JavaScript co ...

javascriptjqueryformsvalidation

Navigating with Vue.js using programmatic methods while passing props

I am working with a Vue component that includes a prop called 'title' like this: <script> export default { props: ['title'], data() { return { } } } </script> After completing a specific action, I need to pro ...

javascriptvue.jsvuejs2vue-router

What is the best way to integrate PHP scripts into jQuery?

I need help integrating PHP into my jQuery sample. Specifically, I would like to insert a PHP variable ($sample) into the "var para1" in the code below. var storyIndictor = jQuery(_storyIndictors[position]); var _content = jQ ...

javascriptphpjqueryinsert

Leveraging JavaScript to extract data from a dropdown menu and apply it to a different section

I am working on a project that involves an HTML section where a user can choose a billing term from a drop-down list. I am in the process of writing JavaScript code to capture the selected option value and use it in another part of the webpage. Here is a ...

javascriptjqueryhtmlcssselect

AJAX does not execute all inline JavaScript code

I am currently using AJAX to load a fragment of a document. I have successfully loaded 'external' scripts, but I am encountering issues when trying to execute all the JavaScript within <script> tags. Below is an example of the HTML fragmen ...

javascriptajax

choosing a specific element within an HTML string stored in a variable

I have a variable containing HTML string data like this: var htmlstring = "<div><div class='testdiv'>924422</div></div>" My goal is to extract the content of the div with a specific class, in this case .testdiv. How ca ...

javascriptjqueryhtml

What is the order of reflection in dynamic classes - are they added to the beginning or

Just a general question here: If dynamic classes are added to an element (e.g. through a jQuery-ui add-on), and the element already has classes, does the dynamically added class get appended or prepended to the list of classes? The reason for my question ...

javascriptjqueryjquery-uijquery-plugins

Secure login system featuring self-contained HTML and Javascript functionalities

I want to create an idle game that will save data on the server instead of using cookies. I am looking for a straightforward method (ideally without using MySQL or PHP) to implement user registration and login functionality using HTML5 and/or Javascript. ...

javascripthtmlauthentication

React BrowserRouter causing issues with "invalid hook calls"

Just starting out with React and I am working on setting up paths using BrowserRouter, Route, and Routes in my code. import React from "react" import "./App.css"; import { BrowserRouter as Router, Route, Routes } from 'react-router ...

javascriptreactjsreact-hooksreact-router-dom

Adjust the ARIA value of a Bootstrap progress bar within a VueJS component on the fly

During the development of my website using VueJS and Bootstrap, I made the decision to utilize Vanilla Bootstrap instead of a specific VueJS framework like VueBootstrap or VueStrap. Currently, I am facing an issue while building a custom component that wr ...

twitter-bootstrapvue.js

Having trouble accessing properties of null (reading 'split'). Please provide a valid prompt

Hey there, I could really use some assistance with an issue I've encountered. Whenever I try to click on "cancel" in a prompt, I keep getting this error message: "Cannot read properties of null (reading 'split')". Basically, all I want is ...

javascriptarraysnullprompt

Sorting out conflicts during the compilation of a Vue project

I'm currently facing an issue with compiling my project. I have already attempted this solution, but after deploying my application, the toolbar and some other components lost their base style. Here is my current package.json. "dependencies&quo ...

vue.jswebpacksassvuetify.jsvuetify-loader

Using the html5-canvas element to drag connected lines

Here is an example of creating four points and connecting them: sample. My goal is to make it possible to drag the entire line connection when clicking on it, but when clicking on a circle, only that specific circle should be extended (already implemented ...

javascriptjqueryhtmlhtml5-canvas

Troubleshooting Google OAuth compatibility glitch in a Quasar and Feathers web application

Current Situation: I am currently in the process of developing a Spa and Android app using quasarjs technology. The backend is powered by a feathers-js server with the feathers-js-oauth plugin for handling authentication. For storing user information, I h ...

node.jsfirebasevue.jsfirebase-authenticationquasar-framework

Is it possible to update a URL in PHP without having to refresh the entire page by utilizing JavaScript?

Below is the JavaScript function I am using to create a URL: function reload(form){ var val1=form.dav.options[form.dav.options.selectedIndex].value; var val2=form.pathogen.options[form.pathogen.options.selectedIndex].value; var val3=form.topicF.options[for ...

javascriptphpjqueryajaxjquery-events

Creating a new component when a click event occurs in React

Currently diving into the world of React while working on a project that involves mapbox-gl. I'm facing an issue where I can successfully log the coordinates and description to the console upon hover, but I can't seem to get the popup to display ...

javascriptreactjstypescriptmapbox

Angular JS is encountering an issue where the promise object is failing to render correctly

I'm currently learning Angular and I have a question about fetching custom errors from a promise object in Angular JS. I can't seem to display the custom error message on my HTML page. What am I missing? Below is my HTML file - <!DOCTYPE htm ...

javascripthtmlangularjspromise

Squashing the `require()` method in nwJS using emberJS

I am facing an issue with my nwjs application that connects to a web address hosting an ember application. I need to access the node context within the ember application to determine the user's operating system for updating purposes. I attempted to do ...

javascriptnode.jsember.jsnode-webkit

Button Fails to Respond on Second Click

I have a button that triggers a JavaScript function. This function, in turn, initiates two sequential AJAX calls. Upon completion of the first call, it performs some additional tasks before proceeding to the second AJAX call. The button functions correctl ...

javascriptjqueryhtmlajax