Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to simulate the "scroll to anchor" on page load in Vue Router?

I have a small Vue.js SPA with the following router configuration, taken from the docs:

export default new VueRouter({
    routes, // defined above...

    mode: 'history',

    scrollBehavior(to, from, savedPosition) {
        if (to.hash) {
            return { selector: to.hash }
        } else if (savedPosition) {
            return savedPosition;
        } else {
            return { x: 0, y: 0 }
        }
    }
})

Consider a link on the homepage:

<router-link to="#services">Services</router-link>

It jumps to the anchor element <div id="services">...</div> as expected. However, when you activate the link, then scroll away from #services, and refresh the page, you will not be brought back to #services. You will stay in the same position where you left off, even though the URL would still have the hash in it (e.g. in the form of app.dev/#services).

How can I configure the router so that on page load, it bring the user to the anchor element, given that the URL contains its hash (and, well, that hash corresponds to a valid existing element)?

like image 808
Alex Avatar asked Jul 06 '17 16:07

Alex


Video Answer


1 Answers

I had the same problem but also wanted to have an animated scroll to the hash. I was able to check off both features with vue-scrollto. https://github.com/rigor789/vue-scrollto

Something like this should work.

// import
import VueScrollTo from 'vue-scrollto';

//...

scrollBehavior(to, from, savedPosition) {
    if (to.hash) {
        VueScrollTo.scrollTo(to.hash, 700);
        return { selector: to.hash }
    } else if (savedPosition) {
        return savedPosition;
    } else {
        return { x: 0, y: 0 }
    }
}

That way, it always animates to the hash. If you don't want to animate, use 0 as the time instead of 700. If you don't like using that module, you can manually jump to the anchor via regular javascript using the techniques described here

like image 170
ProblemsOfSumit Avatar answered Sep 20 '22 07:09

ProblemsOfSumit