I'm looking for a smart way to handle in-page anchors with Vue Router. Consider the following:

```
<router-link to="#app">Apply Now</router-link>
<!-- some HTML markup in between... -->
<div id="app">...</div>

```

The "scroll to anchor" behavior [described in the docs](https://router.vuejs.org/en/advanced/scroll-behavior.html) works fine except:

* When you click on the anchor, it brings you down to the `div id="app"`. Now scroll away from the `div` back to the anchor and try clicking it again -- this time you will **not** jump down to the `div`. In fact, the anchor will retain the class `router-link-active` and the URL will still contain the hash `/#app`;
* With the steps above, if you refresh the page (the URL will still contain the hash) and click on the anchor, nothing will happen either.

This is very unfortunate from the UX perspective because a potential customer has to manually scroll all the way down again to reach the application section.

I was wondering if Vue Router covers this situation. For reference, here's my router:

```
export default new VueRouter({
    routes,
    mode: 'history',
    scrollBehavior(to, from, savedPosition) {
        if (to.hash) {
            return { selector: to.hash }
        } else if (savedPosition) {
            return savedPosition;
        } else {
            return { x: 0, y: 0 }
        }
    }
})

```