Navigate to page sections using # doesn't work

[mohamedsaleh1984]

Have you read the Contributing Guidelines on issues?

• I have read the Contributing Guidelines on issues.

Prerequisites

• I'm using the latest version of Docusaurus.
• I have tried the npm run clear or yarn clear command.
• I have tried rm -rf node_modules yarn.lock package-lock.json and re-installing packages.
• I have tried creating a repro with https://new.docusaurus.io.
• I have read the console error message carefully (if applicable).

Description

when you paste the url including the section, the browser doesn't navigate to the section mentioned after # in th URL

https://test.com/docs/testpage#videos

Reproducible demo

No response

Steps to reproduce

1. Open https://everoed.evero.com/docs/-screen-descriptions/individual/individual_individual_lookup
2. Click Videos on the right side
3. Copy the URL https://everoed.evero.com/docs/-screen-descriptions/capture_admin/ind_hab_plan#videos
4. Paste in new tab (Doesn't scroll to videos) as origial page does

Expected behavior

scroll down to the section mentioned from the URL # value

Actual behavior

Stuck at the top of the page.

Your environment

• Public source code: NA
• Public site URL: https://everoed.evero.com/docs/-screen-descriptions/capture_admin/ind_hab_plan#videos
• Docusaurus version used: 2.4.1
• Environment name and version (e.g. Chrome 89, Node.js 16.4): Chrome Version 118.0.5993.89
• Operating system and version (e.g. Ubuntu 20.04.2 LTS): Windows

Self-service

• I'd be willing to fix this bug myself.

[slorber]

Your site requires to log in, so it is impossible to help you.

Please provide minimal a valid repro that we can properly debug using latest version of Docusaurus, using docusaurus.new

Until then I consider this is not a bug, cf https://docusaurus.io/docs#staying-informed

[furkanarabaci]

@mohamedsaleh1984 Does your page contain any images before the anchor, aka<img> tags or ![](<url>) ?

@slorber I wouldn't say doesn't work but there's an issue about anchor links not navigating correctly when there are images in the page.

For example, it's reproducible in one of the official Docusaurus Documentation pages. It happens on the first launch but slightly:
https://docusaurus.io/docs/advanced/routing#generating-and-accessing-routes

Actual reproduce steps:

1. Go to a link with anchor in it
2. Scroll a bit down or up, doesn't matter
3. Reload the page
4. Notice the scroll state sometimes aligns with anchor, but most of the time it doesn't

I believe that has to do with images being loaded asynchronously. At initial render, those dimensions will be 0 and it will scroll accordingly.

[mohamedsaleh1984]

No we don't have images, this is the full MD file.

---
id: ind_hab_plan
title: Individual Hab Plan Schedule
areas: [""]
type: SCREEN_DESCRIPTION
date_created: 6/1/2023
date_updated: 6/22/2023
---

:::tip Downloadable PDF

[English](/docs/PDFs-Screens/CaptureAdmin/ind-hab-plan.pdf)

[Precione aquí para abrir en PDF](/docs/PDFs-Screens/CaptureAdmin/spanish-indhab.pdf)

:::

:::info Description

To access this screen, the user will click on Capture Admin from All Apps menu followed by selecting Facility Hab Plan Schedule  from the Schedule dropdown. This screen provides the ability to schedule question series for individuals in facilities.

::: 

## **Individual Hab Plan Schedule**

### Individual Hab Plan Schedule

***Program Name***

Ability to select the program name from the dropdown list.

***Facility Name*** 

Ability to select the facility name from the list available within the dropdown.  

### Individual List

***Individual Name*** 

Displays the name of the individuals under the selected program and facility. Click to view the schedule in detail.

## **View - Individual Hab Plan Schedule Screen** 

### Programs

Displays the details of the programs scheduled for the individual.

***Program***

Displays the name of the program.

***Facility***

Displays the name of the facility.

***Effective Date***

Displays the date from which the program was effective.

### Hab Plan Schedule

***Service Text*** 

Displays the service text. Service text cannot be edited in the edit screen.

***Schedule***

Ability to view the schedule details on selecting the schedule box. 

***Start Date*** 

Displays the schedule start date.

***End Date*** 

Displays the schedule end date.

***New Edit Button***

Allows the user to edit the existing schedules and add new schedules.

## **Edit- Individual Hab Plan Schedule Pop-up**

Clicking the edit button will pop up this screen. This screen allows the user to add, remove and update the schedules.  Click on the schedule box to edit the details.

### Edit Schedule 

***Schedule Type*** 

Ability to select the schedule type from the dropdown. Based on the type selected, additional options requiring information will be displayed.   

***Min. Attempts***

Ability to select the number of attempts required for the series from the drop- down menu.

### Interval

Ability to select from the option available for the interval in connection with the schedule type selection followed by enter the value.

## **Add - Individual Schedule Pop-up**

Allows the user to add new schedule for the individual. 

## **Related Resources**

### Videos

[Using Capture: 1/14/2021](https://everoed.evero.com/videos-v2?videoId=47)

[mohamedsaleh1984]

We have created a dev user for test
Username: etester
Password: DocusaurusTest123!
Domain: https://dev2-everoed.evero.com/
URL: https://dev2-everoed.evero.com/docs/-screen-descriptions/billing/billing_billing_claimbatchpending#raise-issue-button

You can notice the scroll doesn't move down to the bottom of the page.

[slorber]

@furkanarabaci your problem is not related to an image but a Mermaid diagram.
Unfortunately those diagrams are rendered asynchronously after React hydration and produce layout shifts. We'd need Mermaid to support SSR (or at least precomputing the size of a diagram) to be able to fix it, or delay the restoration of the anchor position (which I'm not sure is a good idea)

[furkanarabaci]

@furkanarabaci your problem is not related to an image but a Mermaid diagram. Unfortunately those diagrams are rendered asynchronously after React hydration and produce layout shifts. We'd need Mermaid to support SSR (or at least precomputing the size of a diagram) to be able to fix it, or delay the restoration of the anchor position (which I'm not sure is a good idea)

I see, created a new issue for my problem to not clutter an irrelevant issue at #9520. Thanks for your answer