Every time I switch to a new Vue.js route, I find myself inexplicably redirected to the bottom of the page, leaving me scratching my head in confusion

I'm really struggling to understand why this issue is happening because there doesn't seem to be any code that would interfere with the scrolling. Every time I click on the link, it immediately takes me to the bottom of the view. I'm not sure which specific piece of code to provide since I have no clue where the root of the problem lies. The navigation is handled using a router-link:

<router-link :to="'LeagueOfStats'">More Info</router-link>

Here is the complete LeagueOfStats route view:

<template>
    <div>
        <main class='wrapper'>
            <div class='project-info'>
                <h1 class='project-title'>League Of Stats</h1>
                <p class='project-description'>
                    League Of Stats is a single-page application which allows
                    League of Legends users to easily look up information and
                    statistics about their accounts by utilizing Riot Games's API.
                </p>
                <p class='project-skills'>Languages, Frameworks & Libraries</p>
                <div class='skills-container'>
                        <img @mouseover='displayAlt' @mouseleave='hover = false' class='skill-image' src="@/assets/html.png" alt="HTML5">
                        <img @mouseover='displayAlt' @mouseleave='hover = false' class='skill-image' src="@/assets/css.png" alt="CSS3">
                        <img @mouseover='displayAlt' @mouseleave='hover = false' class='skill-image' src="@/assets/js.png" alt="JavaScript">
                        <img @mouseover='displayAlt' @mouseleave='hover = false' class='skill-image' src="@/assets/vue.png" alt="Vue.js">
                        <img @mouseover='displayAlt' @mouseleave='hover = false' class='skill-image' src="@/assets/php.png" alt="PHP">
                        <img @mouseover='displayAlt' @mouseleave='hover = false' class='skill-image' src="@/assets/laravel.png" alt="Laravel">
                        <img @mouseover='displayAlt' @mouseleave='hover = false' class='skill-image' src="@/assets/mysql.png" alt="MySQL">
                    </div>
                <div class="buttons flex">
                    <a class='live-site' href="http://lol.kabzamalov.com"><img src="@/assets/external.svg" alt="Visit Site">Visit Site</a>
                    <a class='github' href="https://github.com/BozhidarKabzamalov/League-Of-Legends-Frontend"><img src="@/assets/github-white.svg" alt="GitHub">Front-end Repository</a>
                    <a class='github' href="https://github.com/BozhidarKabzamalov/League-Of-Legends-Backend"><img src="@/assets/github-white.svg" alt="GitHub">Back-end Repository</a>
                </div>
                <div class='caption' v-if='hover' v-bind:style='{ "top": eOffsetTop + "px", "left": eOffsetLeft + "px" }'>
                        <p>{{ alt }}</p>
                    </div>
            </div>
            <div class="image-container">
                <img class='project-image' src="@/assets/leagueofstats/lol1.jpg" alt="Landing Page">
            </div>
            <div class="project-specifications">
                <p class='project-description'>
                    The application consists of a Vue.js front-end and PHP (Laravel) back-end
                    which are separated from each other. Separating the front-end from the
                    back-end has many advantages such as:
                </p>
                <ul>
                    <li>Readability</li>
                    <li>Flexibility</li>
                    <li>Scalability</li>
                    <li>Easy maintenance</li>
                    <li>Modularity</li>
                    <li>Easier deployment</li>
                </ul>
                <p class='bold'>Front-end responsibilities:</p>
                <ul>
                    <li>Make requests to the back-end for information about League Of Legends users and matches</li>
                    <li>Display all the information in an understandable manner</li>
                </ul>
                <p class='bold'>Back-end responsibilities:</p>
                <ul>
                    <li>Make requests to Riot Games's API and then return the responses to the front-end</li>
                    <li>Store the API responses inside the database</li>
                    <li>Obfuscate Riot Games's API key</li>
                </ul>
            </div>
            <div class="image-container">
                <img class='project-image' src="@/assets/leagueofstats/lol2.jpg" alt="Landing Page">
            </div>
        </main>
        <Footer></Footer>
    </div>
</template>

<script>
import Footer from '../components/Footer.vue';

export default {
    components: {
        Footer
    },
    data(){
        return {
            hover: false,
            eOffsetTop: null,
            eOffsetLeft: null,
            alt: null
        }
    },
    methods: {
        displayAlt(e){
            this.hover = true;

            let height = e.target.height
            let width = e.target.width
            let eOffsetTop = e.target.offsetTop
            let eOffsetLeft = e.target.offsetLeft
            let alt = e.target.alt

            this.eOffsetTop = eOffsetTop + height + 10
            this.eOffsetLeft = eOffsetLeft + width/2
            this.alt = e.target.alt
        }
    }
}
</script>
javascriptvue.js

Answer №1

One common issue with scrolling can be easily resolved by implementing a hook in the router. This ensures that the scroll position is always reset to the top of the page whenever a new page is loaded.

router.beforeEach((to, from, next) => {
    if (!to.hash) {
        window.scrollTo(0, 0);
    }

    next();
});

Supporting evidence can be found here: https://github.com/vuejs/vue-router/issues/173#issuecomment-149073396

--

If this solution does not address the problem, consider temporarily disabling your displayAlt method as it could potentially be causing issues.

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

Infinite Vue.js Scrolling: Elevate Your Web

Do you know of any directive that can be used to implement Ajax infinite scroll with vue.js? Or is there a directive already available for this purpose? Your assistance would be highly appreciated. ...

jqueryvue.js

Is there a way to access specific methods within a JavaScript file?

Within my javascript assets folder, I have a file named jstester.js that looks like this: function hehe() { alert("wedsdsd"); } document.write("fdygsdfysdgf"); Then in the main index.html file in the public directory, I include the following code: & ...

javascripthtml

Connect controls to elements within a sibling component

My ImagesInput component utilizes an array called images to display the images. I have added a button for changing the images, but I am facing an issue in separating and changing the correct image. It seems to only modify the last index of each gallery a ...

javascriptreactjsredux

Elevate your frontend development game with the powerful combination of Vue js 3

I've been attempting to add this dependency, but I keep receiving an error message stating that it doesn't exist and Vue 3 is unable to resolve the component. Click here to visit the npm page for vue-phone-number-input Any assistance you can pr ...

javascriptnode.jsvue.jsnpmfrontend

Developing an export feature for a mean application

Attempting to develop a basic module for organizing accounts on a website seemed like a straightforward task. I thought it would be as simple as creating a file with some functions, wrapping it in module.exports, and everything would work smoothly. However ...

javascriptexpress

Having trouble with Laravel, Vue.js, and Pusher not communicating with a private channel on Heroku

I have a Laravel/Vue.js real-time application that works perfectly on my local environment. However, when I deploy it to Heroku, the response from /auth/broadcast is unusual. bootstrap.js window.axios.defaults.headers.common = { 'X-Requested-With& ...

laravelvue.jsauthenticationherokupusher

What is the syntax for declaring a boolean or object type?

Is it possible to create a variable in TypeScript that can hold either true/false or an object of booleans? I'm still learning TS and would like some input on this syntax. variableA: { a: boolean, b: boolean } | boolean I found a workaround for now, ...

javascripttypescript

The Videojs controls are unresponsive to clicks

Having a strange issue with videojs. I've been attempting to load videojs in the same way as outlined in the documentation, using a dynamic video tag. videojs(document.getElementById('myVideo'), { "controls": true, "autoplay": false, "prelo ...

javascriptjqueryhtmlhtml5-videodynamic-loading

What might be the underlying reason for Chrome displaying a net::ERR_FAILED error when attempting to make a request from a Vue frontend to a C# API using Axios?

I have a C# Backend+API that I interact with from my Vue Application using axios to make requests. In the C# code, there is an endpoint that looks like this: // GET: api/Timezone public HttpResponseMessage GetTimezoneData() { ...

c#typescriptvue.jshttpaxios

Navigate to the end of the progress bar once finished

I have a solution that works, but it's not very aesthetically pleasing. Here is the idea: Display a progress bar before making an ajax call Move the progress bar to the end once the call is complete (or fails) Keep the progress bar at 90% if the aj ...

javascriptjqueryajax

Combining AngularJS with Servlets: A Seamless Integration

I am attempting to retrieve a JSON object from a servlet by calling a function through a link in my HTML code. Below is the HTML link that calls the fTest function: <td><a href="" ng-controller="minaplantaCtrl" ng-click="fTest(x.id_camion_descar ...

javajavascriptjsonangularjsservlets

Javascript - Transforming tabular information into a hierarchical tree structure (JSON)

When extracting JSON data from a table, the format typically resembles the following simplified structure: https://i.sstatic.net/eqfXM.png The JSON format obtained might look like this: const myObjOriginal = { "rows": [{ "name": "row 1", "cell ...

javascriptarraysjsontreejavascript-objects

Describing how to assign multiple variables in a VUEX mutation

store.js import Vue from 'vue'; import Vuex from 'vuex'; import userStore from './user/userStore.js'; import VuexPersist from "vuex-persistedstate"; Vue.use(Vuex) const debug = process.env.NODE_ENV != ...

javascriptvue.jsvuex

Error message "The function is not defined" is commonly encountered in node.js programming

I'm having trouble with this section of my code. The error message I receive is: ReferenceError: callback is not defined at C:\js\kweb-hw\routes\board.js:14:13 var express = require('express'); var router = express. ...

javascriptnode.js

Understanding the Relationship Between Interfaces and Classes in Typescript

I’ve come across an interesting issue while working on a TypeScript project (version 2.9.2) involving unexpected polymorphic behavior. In languages like Java and C#, both classes and interfaces contribute to defining polymorphic behaviors. For example, i ...

javascripttypescriptoopinterfacepolymorphism

Is it possible to use JavaScript for detecting third-party videos?

I'm currently developing an HTML5 video player that also has a fallback to flash. One of the challenges I am facing is that the video content is being provided by various third-party sources. It seems that some of these third parties serve videos bas ...

javascripthtmlflashvideo

Troubleshooting Problem with ListItem Alignment in Material UI v0 involving Custom Avatar Component

Material UI version: v0.20.0 I'm facing an issue with aligning the leftAvatar value using the CustomAvatar component, as shown in the attached screenshot. Any assistance would be appreciated. CustomAvatar: The functionality of this component is cond ...

javascriptreactjsmaterial-ui

Deep-diff JavaScript functions are not permissible for use

In my AngularJS application, I am currently attempting to utilize a JavaScript package. To reference it in my index.html file, I added the following code: <script src="deep-diff-0.3.1.min.js"></script> Furthermore, in my controller, I am usin ...

javascriptangularjsnode.js

What's the best way to set up server-side pagination for mui-datatable?

Is server-side pagination for mui-datatable implementation a complex task? Challenges: I am facing difficulties in capturing the user-selected value from the rowsPerPage options. When a user selects '15', how can I update these values within ...

javascriptreactjsmaterial-uimui-datatable

Adding a panel dynamically with Bootstrap incorrectly

I have been using the Collapse panel in Bootstrap and it was working perfectly when implemented statically. However, I encountered an issue when trying to add it dynamically. HTML <form> <div class="form-group" > <label for="c ...

javascriptjqueryajaxtwitter-bootstraptwitter-bootstrap-3