Standalone bundle - page load anchor jumps

[thim81]

Description

The standalone bundle generates a nicely looking page various sections and uses anchor links to jump to the different parts of the page.

But it seems that when entering the same link (with anchors) in the browser the page does not jump to the location.

Example: https://example.com/events/sdk#message-interactions.mobile.push.clicked

Expected result

When using the full URL in a browser, I would expect that browser scrolls to the part of the page.

Like this example: https://redocly.github.io/redoc/#operation/getOrderById This jump to the section in the page.

Actual result

The page gets loaded by the browser does not scroll.

Steps to reproduce

Troubleshooting

Using Chrome.

[magicmatatjahu]

@thim81 Hello! Component doesn't perform additional action to go to given anchor after initialization. If you are using standalone bundle (without server-side rendering and then hydration on the client) component always init after "native" anchor jump. You can "fix" that with simple script (you can add it in your page).

    <script>
      window.onload = function() {
        const hash = location.hash.replace('#','');
        if (!hash) return;
        setTimeout(() => {
          const element = document.getElementById(hash);
          element && element.scrollIntoView();
        }, 100); // add some delay to wait for full rendered component
      }
    </script>

I leave issue as open because I think that we should fix that problem on the component side.

[thim81]

@magicmatatjahu Thanks again for the excellent feedback. I'm going to give it to implement the snippet.

If it would be supported in the component, it will improve the UX when referencing to the section on the page.

[thim81]

FYI: The snippet works like a charm 💪

[AceTheCreator]

@magicmatatjahu can i look into this also? Just brush up on my typescript skill, I wanna have some fun with it

[magicmatatjahu]

@AceTheCreator Yeah, you can work on it. Please ping me if you will have any problems :) Of course, remember, work on next branch :)

[github-actions[bot]]

This issue has been automatically marked as stale because it has not had recent activity :sleeping:

It will be closed in 120 days if no further activity occurs. To unstale this issue, add a comment with a detailed explanation.

There can be many reasons why some specific issue has no activity. The most probable cause is lack of time, not lack of interest. AsyncAPI Initiative is a Linux Foundation project not owned by a single for-profit company. It is a community-driven initiative ruled under open governance model.

Let us figure out together how to push this issue forward. Connect with us through one of many communication channels we established here.

Thank you for your patience :heart:

[github-actions[bot]]

This issue has been automatically marked as stale because it has not had recent activity :sleeping:

It will be closed in 120 days if no further activity occurs. To unstale this issue, add a comment with a detailed explanation.

There can be many reasons why some specific issue has no activity. The most probable cause is lack of time, not lack of interest. AsyncAPI Initiative is a Linux Foundation project not owned by a single for-profit company. It is a community-driven initiative ruled under open governance model.

Let us figure out together how to push this issue forward. Connect with us through one of many communication channels we established here.

Thank you for your patience :heart: