itwanger / itwanger/toBeBetterJavaer
通过锚点链接访问页面时， 页面会跳转到错误的位置
Nobody has claimed this yet.
- Dominant language
- Java
- Stars
- 17.7k
- Forks
- 2.5k
- PR merge metrics
- No merged PRs in 30d
Description
问题描述
通过锚点链接访问页面时（例如 collection.html#_28-讲讲-treemap-怎么实现有序的），
页面会跳转到错误的位置（比如第15题附近），而不是目标位置（第28题）。
复现步骤
- 直接访问带锚点的链接
- 等待页面加载完成
- 观察到页面停留在第15题左右，而不是第28题
原因分析
页面中的图片没有设置 width 和 height 属性，导致图片加载时产生布局偏移（Layout Shift）。
浏览器在图片加载前就执行了锚点跳转，但图片加载后页面内容被往下推，导致跳转位置不准。
建议修复
为图片添加 width 和 height 属性，或使用 CSS aspect-ratio，避免布局偏移。
影响
- 锚点链接失效，影响用户体验
- 影响 CLS（Cumulative Layout Shift）指标，可能影响 SEO
Contributor guide
No contributing guide indexed for this repository
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start with collection.html and inspect the images used near the anchor target. Load the page through the reported anchor and check its position before and after images finish loading. Done means the target heading remains at the correct location after loading, with image dimensions or an aspect ratio preventing layout shift.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- css, html
- Domain
- documentation
- Issue type
- Bug
- Difficulty
- 2/5
- Estimated time
- 1-3 hours
- Activity status
- Stale
- Clarity
- Clearly specified
- Newbie friendliness
- 50/100