Skip to content

通过锚点链接访问页面时, 页面会跳转到错误的位置 #188

@chenjiarui123

Description

@chenjiarui123

问题描述

通过锚点链接访问页面时(例如 collection.html#_28-讲讲-treemap-怎么实现有序的),
页面会跳转到错误的位置(比如第15题附近),而不是目标位置(第28题)。

复现步骤

  1. 直接访问带锚点的链接
  2. 等待页面加载完成
  3. 观察到页面停留在第15题左右,而不是第28题

原因分析

页面中的图片没有设置 widthheight 属性,导致图片加载时产生布局偏移(Layout Shift)。
浏览器在图片加载前就执行了锚点跳转,但图片加载后页面内容被往下推,导致跳转位置不准。

建议修复

为图片添加 widthheight 属性,或使用 CSS aspect-ratio,避免布局偏移。

影响

  • 锚点链接失效,影响用户体验
  • 影响 CLS(Cumulative Layout Shift)指标,可能影响 SEO

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions