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

Đang mở
  • Có gì không ổn?
#188 2 bình luận 0 reaction 0 người được giao Xem trên GitHub

Chưa có ai nhận issue này.

Đánh giá

Độ khó
2/5
Thời gian dự kiến
1-3 giờ
Mức phù hợp với người mới
50/100
Loại issue
Lỗi
Độ rõ ràng
Đặc tả rõ ràng
Mức độ hoạt động
Đình trệ
Công nghệ
css, html
Lĩnh vực
documentation

Hướng nghiên cứu

Bắt đầu với collection.html và kiểm tra các hình ảnh được sử dụng gần đích neo. Tải trang thông qua neo được báo cáo và kiểm tra vị trí của trang trước và sau khi hình ảnh tải xong. Công việc được hoàn tất khi tiêu đề đích vẫn ở đúng vị trí sau khi tải, với kích thước hình ảnh hoặc tỷ lệ khung hình ngăn layout shift.

Do mô hình lập chỉ mục viết ra từ nội dung của issue.

Mô tả

问题描述

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

复现步骤
  1. 直接访问带锚点的链接
  2. 等待页面加载完成
  3. 观察到页面停留在第15题左右，而不是第28题
原因分析

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

建议修复

为图片添加 width 和 height 属性，或使用 CSS aspect-ratio，避免布局偏移。

影响
  • 锚点链接失效，影响用户体验
  • 影响 CLS（Cumulative Layout Shift）指标，可能影响 SEO
Ngôn ngữ chính
Java
Star
17.8k
Fork
2.4k
Không có pull request nào được merge trong 30 ngày

Chuẩn bị môi trường

Dự án này không cung cấp dev container, Dockerfile hay hướng dẫn đóng góp, nên bạn cần tự thiết lập môi trường: hãy bắt đầu từ README và xem hướng dẫn đóng góp lần đầu của chúng tôi để biết các bước chung.

Bắt đầu từ đâu

  1. Đọc hết issue, rồi đọc hướng dẫn đóng góp của dự án.
  2. Bình luận trên issue rằng bạn sẽ nhận — tránh hai người làm cùng một việc.
  3. Fork repository và làm thay đổi trên một nhánh.
  4. Mở pull request có tham chiếu số hiệu của issue.

Issue khác của itwanger/toBeBetterJavaer

Tất cả issue của itwanger/toBeBetterJavaer

Issue tương tự

Thêm issue về Java

Nhận issue mới trong hộp thư của bạn

Bản tóm tắt ngắn những issue GitHub phù hợp với người mới.