This article explains how to adjust the display position of the <a> link destination in the same page.
If we are using a fixed header, we need to adjust the position of the anchor when clicked the <a> link.
Because the anchor is hidden behind the header.

The following lists are the table of contents about this article.

• Target audience
• Environment
• Preconditions
• Adjusting link destinations position
• Reference articles

Target audience

• Those who want to adjust the display position of the <a> link destination in the same page.

Environment

• CSS3

Preconditions

Nothing.

Adjusting link destinations position

Setting the following codes to the target anchor tag to add-on.css.
When you set it, you must set the same number to padding-top and margin-top.

#target-tag {
  display: block;
  padding-top: 60px;
  margin-top: -60px;
}

In this blog, I adjust the headings in the post using the following codes.

/* For link destinations adjustment. */
#site-main .post .content h1,
#site-main .post .content h2,
#site-main .post .content h3,
#site-main .post .content h4,
#site-main .post .content h5,
#site-main .post .content h6 {
  display: block;
  padding-top: 60px;
  margin-top: -60px;
}

Reference articles

ページ内リンクのジャンプ先の位置を複雑なタグは無しでCSSだけで調整する方法 | 大阪のホームページ制作会社YCOM

xxxxxxxxxx