[CSS] 使用 scroll-padding-top 達成免 javascript 也能夠在移動到錨點時設定離瀏覽器頂端有一定距離

先前我們提過可以透過 scroll-behavior: smoth; 達成免 javascript 就可以透過點擊超連結的錨點平滑移到對應的區塊，而如果有時候頁面上方被元素擋住，比如選單之類的，這樣滑過去時因為預設是貼到瀏覽器頂端，所以該區塊最上方就會被遮住，這個以往因為都是靠 javascript 處理所以加個參數就好，現在我們也都能夠完全用 CSS 解決了。

處理方法很簡單，在 html, body 加上 scroll-padding-top 並設定想要的間距就好。

html, body {
  scroll-padding-top: 100px;
}

這將使點擊錨點時，滾動條會先向上滾動 100 像素，然後再滾動到錨點的位置。

以往使用 JavaScript 來設定的做法可以參考以下程式碼：

function scrollToAnchor(anchorName) {
  var anchor = document.getElementById(anchorName);
  var offset = anchor.offsetTop;
  window.scrollTo({
    top: offset - 100,
  });
}

document.querySelector('a[href="#anchor]').addEventListener('click', scrollToAnchor);

可以用純 CSS 就方便很多了。