fix: Readjust anchor scroll offset on page load

[dimodi]

The problem is related to browser scrolling to anchors, which occurs before our scripts are executed and before the page layout is adjusted. A CSS fix cannot be implemented, because it will require pushing the anchored heading down on page load, which is not possible. Hence, a JS workaround is suggested here. It checks if an anchor exists in the URL on page load and if so, scroll to it programmatically with a timeout.

[marin-bratanov]

I was fearing we will have to do something like this.

Question: Do you think using scroll-behavior: smooth; on the scrollable wrapper would let us avoid the JS solution? Or maybe position:sticky for the header container?

[marin-bratanov]

btw, I am willing to be a lab rat for this in Blazor if we want to try it out before merging, ping me if you want that.

[dimodi]

Question: Do you think using scroll-behavior: smooth; on the scrollable wrapper would let us avoid the JS solution? Or maybe position:sticky for the header container?

I don't think these options will produce any better results, but feel free to experiment:

https://runner.telerik.io/fullscreen/@dimodi/igahoTut#h202

Smooth scrolling affects how the browser moves the page content, but not to where. If we have something slapped on the top of the viewport and we are scrolling the body, it looks like the anchored text will always end up behind it with script-less scrolling.

Here is a better working scenario with a custom scrollable container, but this is very different HTML/CSS setup, compared to what we have in the docs now.

https://runner.telerik.io/fullscreen/@dimodi/uWomAYUv#h202

Regards

[imtodor]

Approved