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

オープン
  • 何か問題がありますか？
#188 コメント 2 件 リアクション 0 件 担当者 0 名 GitHub で見る

まだ誰も着手していません。

評価

難易度
2/5
見積もり時間
1〜3時間
初心者へのやさしさ
50/100
issue の種類
バグ
明瞭さ
明確に書かれている
活発さ
停滞
技術スタック
css, html
領域
documentation

調査の方向性

collection.html から始め、アンカーのターゲット付近で使用されている画像を調べます。報告されたアンカーを通じてページを読み込み、画像の読み込みが完了する前と後で位置を確認します。読み込み後もターゲットの見出しが正しい位置に留まり、画像の寸法またはアスペクト比によってレイアウトシフトが防止されていれば完了です。

索引モデルが issue の本文から書いたものです。

説明

问题描述

通过锚点链接访问页面时（例如 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
主要言語
Java
スター
17.8k
フォーク
2.4k
30日以内にマージされた PR はありません

環境構築

このプロジェクトには開発コンテナ、Dockerfile、コントリビューションガイドがありません。まず README を読み、一般的な手順ははじめてのコントリビューションガイドを参照してください。

はじめの一歩

  1. issue を最後まで読み、次にプロジェクトのコントリビューションガイドを読みます。
  2. 着手することを issue にコメントします — 二人が同じ作業をするのを防げます。
  3. リポジトリをフォークし、ブランチを切って変更します。
  4. issue 番号を参照したプルリクエストを送ります。

itwanger/toBeBetterJavaer のほかの issue

itwanger/toBeBetterJavaer の issue をすべて見る

似ている issue

Java の issue をもっと見る

新しい issue をメールで受け取る

初心者向けの GitHub issue を短くまとめたダイジェスト。