顶部的 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>

希望这可以帮助。