通过锚链接偏移浏览器原生平滑滚动

Question

我的文档正在使用通过 CSS（而不是 javascript）定义的浏览器原生平滑滚动行为，并使用锚链接在单击时向下滚动到页面的指定部分。

这工作正常，除了锚点位于页面顶部最终隐藏在动画滚动完成后固定到屏幕顶部的粘性导航栏下方。 因此，我需要偏移滚动的目标 Y 坐标。

示例（当您单击时）：

 @media ( prefers-reduced-motion: no-preference ) { html { scroll-behavior: smooth; } } nav { position: fixed; top: 0; background-color: rgba(204, 204, 204, 0.9); padding: 1rem; text-align: center; width: 100%; } body { margin: 0; } main { margin: 4rem 1rem 120vh; }

 <nav>Nav Bar</nav> <main> <a href="#example">Example Anchor Link</a> <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> <p id="example">Scroll Target</p> </main>

有没有办法偏移滚动目标，使其不被导航栏覆盖？ 我认为浏览器的滚动 animation 完成时不会触发 javascript 事件。 我还没有看到自定义浏览器的 animation 持续时间的方法。

Answer 1

我只是偶然发现了这个问题......

答案很简单，你总是可以给目标元素一些 padding top，在这种情况下，例如 60px 的 padding，因为导航栏的高度是 50px。 这将作为一个偏移量。

 @media ( prefers-reduced-motion: no-preference ) { html { scroll-behavior: smooth; } } nav { position: fixed; top: 0; background-color: rgba(204, 204, 204, 0.9); padding: 1rem; text-align: center; width: 100%; } body { margin: 0; } main { margin: 4rem 1rem 120vh; }

 <nav>Nav Bar</nav> <main> <a href="#example">Example Anchor Link</a> <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> <p id="example" style="padding-top: 60px;">Scroll Target</p> </main>