단순히 샵링크로 이동하면 엘리먼트 자리에 top: 0px자리로 위치한다.
위쪽에 간격을 두거나 상단에 고정된 헤더영역이 존재하면 위치가 마음에 들지 않을것이다.

그다지 좋은 방법이 없어서 편법으로 해결할줄 알았는데 꽤 유연하게 대처할 수 있어 보인다.

<div id="target" class="element">
  contents
</div>

<style>
.element:target {
  scroll-margin-top: 30px;
}
</style>

대략 이런 형태로 css로 깔끔하게 대처할 수 있다.

<style>
.element:target {
  scroll-margin-top: calc(var(--header-height) + 30px);
}
</style>

이런 형식으로 헤더높이가 지정된변수를 여백을 더해서 공간을 여유롭게 지정할 수 있을것이다.
아직 어떤 리스크가 나올지는 모르겠지만 아직은 괜찮아 보일 것이다.