頁面中的鏈接將您的內容滾動到瀏覽器窗口的頂部。有什么辦法可以增加利潤嗎？我將使用一些javascript來引導滾動，但希望有一個可行的退路。

所以，簡而言之，我可以在CSS中添加一個空白，當它是一個頁面鏈接時，在瀏覽器窗口的頂部和一個部分之間添加一些空間。

HTML:

<nav>
    <a href="#test">TEST</a>
</nav>
<div class="section">
    <a name="test"></a>
    <p>This content should be offset from the top of the page when scrolled to</p>
</div>

進行頁面內鏈接的首選方式是使用id而不是name屬性。

<a href="#test">

應該符合:

<div id="test">

從這里你可以很容易地添加填充到#test div的頂部，這將是你的滾動位置。

例如:http://tinkerbin.com/EvV7byy9

CSS現在支持頂部滾動邊距。

這是2021年最好的做法。

嗯，我會將每個部分的錨點設置為絕對定位，從該部分的開頭向下大約10px。它看起來像這樣:

.section {
    position: relative;
}

.section > a {
    position: absolute;
    top: 10px;
}

這實際上是10個像素的余量。您可以相應地調整top的值來更改邊距/填充。我還使用了直接后代操作符( >)，所以段落中的鏈接不會受到影響。

還有，就像@NathanManousos提到的，不應該再使用name屬性，而應該使用ID屬性。相對文檔鏈接將滾動到任何元素的ID，而不僅僅是鏈接。您可以在每個section DIVs上放置一個ID，并使用填充符滾動到div的頂部，填充符將使實際內容在div中更靠下。

<style>
    .section {
        padding-top: 10px;
    }
</style>

...

<nav>
    <a href="#test">TEST</a>
</nav>
<div class="section" id="test">
    <p>This content should be offset from the top of the page when scrolled to</p>
</div>

解決方案是滾動邊距頂部。這允許你以你喜歡的任何單位指定一個偏移量& quot頭部空間& quot到您滾動到的部分 查看ARA Münsterlingen | Anlagen的實例

.anlage-post {
    scroll-margin-top: 175px;
}