URL with heading anchor does not scroll up if website not already loaded

[jrwrigh]

Describe the bug

Using a URL with a blog post heading anchor, the site jumps past the heading. Note this does not occur when using heading anchors on the home page of the demo site; only with blog posts (that I've tested).

To Reproduce

Steps to reproduce the behavior:

1. Go to "Technical Content" blog post on demo website
2. Add #examples to the end of the URL
3. Copy that URL into a different tab/window/browser

Expected behavior

When typing in (or clicking if available) a post heading anchor (ie. the #[Heading name]) while the website is already loaded, the screen will jump past the heading and then scroll back to the anchored heading.

For the Home page, the jump-and-scroll works both while the website is already loaded and when you're going straight from a random tab/window.

Technical details:

• Academic Version: Demo Website (0.4.8 ?)
• Hugo Version: Demo Website
• Browser/OS: Firefox and Chrome, Manjaro Linux

Below is a gif of the behavior:

First we go to the blog post itself. When manually typing in the #examples anchor to the URL, the page correctly jump-and-scrolls.

When copy/pasting that exact same URL into a different tab/window, we get the jump, but not the scroll.

[gcushen]

Academic supports a number of dynamically sized components such as the navbar, Portfolio widget, math, and diagrams. In order to jump to a page anchor, we need to know the offset to the anchor once the dynamic components have loaded and fed back their render height to Academic.

There are a number of approaches to handle this in the user experience. An alternative, for example, is to show a loading screen until the page has loaded, however one of the general principles of app design is to start rendering earlier rather later.

[jrwrigh]

Gotcha. So is there any solution/actionable for this or is it more just a minor quirk that isn't worth fixing?

[gcushen]

This is inherently how web pages are loaded by the browser when powerful async integrations are involved. There is room for Mermaid, Mathjax, etc. to further optimise their code. If you turn off or reduce as much dynamically sized content as possible on your site, then the page load may perhaps be faster with a less noticeable delay on the anchor coming into view. For example, try turning off math, diagrams, and highlighting.

If anyone wishes to contribute to improving the user experience in some way, then I'll be happy to review a PR as always :)

[stale[bot]]

This issue has been automatically marked as stale because it has not had any recent activity. The resources of the Academic team are limited, and so we are asking for your help. If this is a bug and you can still reproduce this error on the master branch, please reply with all of the information you have about it in order to keep the issue open. If this is a feature request, and you feel that it is still relevant and valuable, please tell us why. This issue will automatically close soon if no further activity occurs. Thank you for your contributions.