scroll-margin-top
как раз задаёт отступ от верхней границы браузера при скролле к якорю. Я таки тупанул, надо его, конечно, не к ссылкам применять, а к самим якорям.
<body>
<style>
.fixed {
top: 0;
left: 0;
height: 60px;
width: 100%;
position: sticky;
background: #f00;
display: flex;
align-items: center;
justify-content: center;
-webkit-text-fill-color: #fff;;
}
:root {
scroll-behavior: smooth;
}
.anchor {
scroll-margin-top: 60px;
}
/*
или просто
* {
scroll-behavior: smooth;
scroll-margin-top: 60px;
}
*/
</style>
<div class="fixed">
<a href="#word">go to anchor</a>
</div>
<hr style="height:1000px" />
<span id="word" class="anchor">слово</span>
<hr style="height:1000px" />