diplodoc-platform / diplodoc-platform/cli

Page does not scroll to the anchor section

Open
#1,266 1 comment 0 reactions 0 assignees View on GitHub
Dominant language
TypeScript
Stars
123
Forks
51
Avg merge
10h 50m
Merged PRs (30d)
38

Description

### Package version

5.0.11

### Node version

20.19.2

### Platform

Static build

### What steps will reproduce the bug?

1. Click to the anchor link of a specific section
2. Copy link
3. Paste link to the browser window

### What is the expected behavior?

Page scrolls to the section with id from link.

### What do you see instead?

Page does not scroll if I copy anchor link to specific section (i.e. http://localhost:5005/sandbox.html#uspeshnoe-sozdanie-tokena). I tried to curl the page and element with id I copied already was ready in the layout.

Image

### Additional information

There is a workaround:
```js
//_assets/scripts

(function () {
window.addEventListener("DOMContentLoaded", function () {
setTimeout(scrollToHash, 100);
});

window.addEventListener("hashchange", function () {
setTimeout(scrollToHash, 50);
});

function scrollToHash() {
if (location.hash) {
const id = decodeURIComponent(location.hash.substring(1));
const el = document.getElementById(id);
if (el) {
el.scrollIntoView({ behavior: "auto", block: "start" });
}
}
}
})();
```

```yaml
# .yfm

resources:
script:
- _assets/scripts/fix-anchors.js
```

Contributor guide

Open the contributing guide

Research direction

Reproduce the anchor-link behavior with the static build described in the issue, then inspect how the generated page handles the section id and URL hash. The issue mentions _assets/scripts/fix-anchors.js and .yfm as a workaround; done means loading a copied anchor URL scrolls to the target section without that workaround.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript, typescript
Domain
documentation, web-dev
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
38/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.