CSS 可以讓頁面跳轉更加流暢和美觀。當前頁面跳轉是指在同一個頁面中跳轉到頁面的其他部分。這個功能在單頁應用程序中尤為重要。下面介紹一些 CSS 技巧幫助你實現更好的頁面跳轉。

/* 添加樣式到當前選中的元素 */
:target {
background-color: yellow;
}
/* 滾動到被選中的元素 */
html {
scroll-behavior: smooth;
}
/* 調整元素滾動位置 */
.hash-link:target {
padding-top: 100px;
margin-top: -100px;
}

:target 選擇器可以讓當前選中的元素添加樣式。這個選擇器非常有用，可以在頁面中添加導航和跳轉鏈接。當用戶點擊鏈接時，被鏈接到的元素就變成了當前選中元素。使用 :target 選擇器，可以讓當前選中的元素高亮顯示。

scroll-behavior 屬性可以讓滾動變得流暢。當用戶點擊帶有 href 屬性的鏈接時，滾動行為會變為平滑滾動。這種滾動方式比瞬間切換更加自然。

如果頁面中存在頁面滾動效果，并且需要在滾動到被選中元素時，調整滾動位置。可以使用 hash-link：target 選擇器來實現。當元素被選中時，可以調整 padding 和 margin 使得元素更加美觀。