Scroll to anchor: target heading hidden by nav bar

[damithc]

More often than not, trying to reach a heading anchor in a page would end up in a scroll position that hide the target heading under the topNav.

e.g., when trying to reach https://markbind.org/userGuide/usingPlugins.html#algolia-enabling-algolia-docsearch this is what I get:

I remember we tried to fix this sometime back but apparently it is not fully fixed?

A minor issue:

1. Go to https://markbind.org/userGuide/usingPlugins.html#algolia-enabling-algolia-docsearch using URL bar
2. Scroll to some other location in the same page
3. To to go back to https://markbind.org/userGuide/usingPlugins.html#algolia-enabling-algolia-docsearch using URL bar
   Actual: The page does not scroll back to https://markbind.org/userGuide/usingPlugins.html#algolia-enabling-algolia-docsearch

[Chng-Zhi-Xuan]

Scroll back issue

Might be a browser issue, using this web page.

• Chrome does not scroll back if you reload the same URL.
• Firefox always scroll back if the same URL is entered.

Navbar blocking

As for the navbar blocking the heading problem, we solved it for the search bar by manually offsetting an additional 100 pixels after jumping to the heading. However for heading anchors, we don't have a Javascript function to help us offset 100 pixels on every load that has an anchor.

This should be fixed with #733 as we move away from position: fixed components. Along with an additional PR for our <navbar> component to have it be compatible with #733.

[damithc]

This should be fixed with #733 as we move away from position: fixed components. Along with an additional PR for our <navbar> component to have it be compatible with #733.

The problem still seems to be present in #733 netlify preview though

[Chng-Zhi-Xuan]

In addition to #733, we have to change the <navbar> component within the Vue.js repository with an additional PR.

[luyangkenneth]

#733 and MarkBind/vue-strap#101 have been merged, so closing this issue as fixed 🙂