Id is not preserved when scrolling

[lifenautjoe]

trafficstars

Given

<nav>
    ...
        <a href="#news" v-scroll-to="'#news'"></a>
    ...
</nav>

<section id="news">
    . . .
</section>

When

The anchor element is clicked, the page scrolls to the section but does not preserve the #news in the url.

So instead of the url looking like mypage.com#news it remains as mypage.com.

Why do this?

Having this would mean being able to create items that can be smoothly scrolled and be referenced by a permalink.

Current workaround

To accomplish this, right now I'm doing the following

Vue.use(VueScrollTo, {
    onDone: function (element) {
        const elementHasId = typeof element.id !== 'undefined';
        if (elementHasId) {
            window.location.hash = element.id;
        }
    }
});

Would be great if this could be integrated to the library and configurable.

[rigor789]

Here is an easier workaround: https://github.com/rigor789/vue-scrollto/issues/25#issuecomment-305910125

It is intended functionality, because in most cases we don't want a hash to change

[lifenautjoe]

Hey @rigor789 ! Thanks for the quick reply!

I agree that in most cases this is the desired behaviour, but when someone adds an id to an element, in most cases it's to be able to reference it on the URL.

Would you be open to consider adding this as a feature and having disabled by default? I could put something together with the minimal code needed.

[rigor789]

I'm not opposed to it, so if you submit a PR we can get it merged!

[samupl]

I would just like to mention that your workaround doesn't play well with the offset option.

So instead of changing the window.location.hash, consider doing:

history.pushState(null, '', `#${element.id}`);