Vuepress: Smooth scrolling when clicking header links

[ulivz]

Contribution welcome!

[chrtz]

Like scrolling back to top?

[ycmjason]

Current header links are using simple anchors. The page jumping is handled by browser.

If we want smooth scrolling, we probably need to implement ourselves.

[chrtz]

Ok - for sure I know what smooth scrolling is. Just wanted to get sure, as the issue doesn't have any further description.

I think, this might be the wrong place to ask for this feature as this belongs to the behavior of Vue Router.
And Vue shouldn't (wether it is VuePress, Vue itself or Vue Router) use different approaches.

There are some issues regarding smooth scrolling in the Vue Router repo, but still no final solution as it still would need 3rd party scripts. Nevertheless, there are ways shown to implement it by your own needs.

[meteorlxy]

That could be a theme-scope consideration. It's better to implement the feature in default theme, but not in core.

[ycmjason]

@chrtz
Don't get me wrong. I am not saying you don't know what smooth scrolling is. I am simply describing what should be done to complete this feature.

I don't think this needs any third-party library or anything to do with Vue router. Since anchor is something native to browser.

[chrtz]

@ycmjason no worries. :D just wanted to clarify that I know what you mean.

I just still think this is related to Vue Router as this can handle the scroll behavior.

[ghost]

Latest changes have implemented smooth scrolling. However, it comes with several issues:

• distracting and time wasting when you have a lot of content in one page (go to https://vuepress.vuejs.org/config/#basic-config and click on #evergreen in the sidebar)

• scrollbar is locked during autoscrolling, making it uncontrollable which is bad UX design

• even more visual noise due to the interaction with the plugin that updates the anchor in the URL.

Browsing to a specific scroll position is a common task that will happen very often when browsing a documentation and should not involve that much noise (changes in URL, blinking of activated/deactivated sidebar headers, scroll duration) and unusual behavior (locked scrollbar).

There is also an issue that after you opened the page and click on a navbar item, it will highlight the navbar item you clicked on, then highlight the item you are at again (this is the issue) and then toggle through all the items in between while scrolling (inconsistent too when section is small) . This all does not look right.

There needs to be an option to disable smooth scrolling for on-page/cross-page navigation that does not cause inconsistent behavior (see #1016).

[kevindenight]

Yeah, i agree with @matjaeck, it is wasting time when you jump between anchors in a very very long doc.

[deraw]

Maybe this can be configurable and done with scroll-behavior: smooth (See MDN web docs) :thinking:

[meteorlxy]

I've created a small plugin vuepress-plugin-smooth-scroll for this.

But it does not work so well with @vuepress/plugin-active-header-links now.

[staghouse]

Any movement on this?