頂部的 HTML 靜態欄覆蓋了該部分的鏈接

Question

我在網站頂部有一個靜態水平欄，該欄的高度為 100px。 在 html 的正文中，我有類似的內容：

<a name="photo-section"></a>

所以我可以從我的網站 www.domain.com/#photo-section 中回憶起那個部分 問題是欄覆蓋了照片部分的一部分（100px），因為它是靜態的； 有什么解決辦法嗎？ 我在頂部添加了一個白色 div，但在實際網站上看起來很糟糕。

當您單擊此處的導航鏈接“照片”時，您可以看到問題

謝謝

Answer 1

解決方案 1：您可以通過添加一些 CSS 來嘗試：

<a href="#photo-section">Jump to Photo Section</a>

[....]
<a name="photo-section" style="display: block; padding-top: 100px;">Photo Section</a>

解決方案 2：或者使用 jQuery 或任何類似 javascript 的：

<a name="photo-section" id="photo-section">Photo Section</a>

然后觸發動畫

<script>
function scrollBonus(id) {
    $('html, body').animate({scrollTop: ($(id).scrollTop() + 100) + 'px'}, 300);
}
</script>

如果您想觸發它，即使訪問者從另一個頁面單擊您的鏈接：

<script>
     $(document).ready(function() {
          scrollBonus(window.location.hash);
     });
</script>

希望這可以幫助。