0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

アンカーリンクの移動先の位置がずれる原因

Posted at

1. imgにloading="lazy"を指定し、smooth-scrollを使っている

smooth-scrollは、CSSでもjsでもこの組み合わせは不具合が出やすい。
画像の遅延読み込みによって画像の高さが認識されないため。なお、htmlに高さをwidth="100"など指定しても改善されなかったため、lazyloadを使うときはsmooth-scrollの使用を控えるか、loadingアニメの読み込み対象をサイト全体(main)に指定する。
サイトの表示速度を考えると前者が無難。

2. jsのsmooth-scrollを使っている

imgにlazyloadを使っていない場合、jsのsmooth-scrollを使っていると、cssのsmooth-scrollに変更すると直ることが多い。
(wordpress等)

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?