Question

我想对页面上的锚点使用平滑滚动。因此，我使用以下代码：

<script>
$(document).on('click', 'a', function(event){
    event.preventDefault();

    $('html, body').animate({
        scrollTop: $( $.attr(this, 'href') ).offset().top
    }, 500);
});
</script>

唯一的问题是我有一个固定的标题，高度为88px。因此，当点击锚点时，它当前会滚动到远处。

如何扩展我的代码以使其正常工作？

Answer 1

如果您知道固定标题始终的高度为88px，您只需将该值添加到最终滚动位置即可为此腾出空间：）

$('html, body').animate({
    scrollTop: $( $.attr(this, 'href') ).offset().top + 88
}, 500);

如果固定标题高度可能会发生变化，您需要检查它的outerHeight并将其添加到偏移量中。假设固定标头的jQuery对象存储为$fixedHeader：

$('html, body').animate({
    scrollTop: $( $.attr(this, 'href') ).offset().top + $fixedHeader.outerHeight()
}, 500);

Answer 2

您是否尝试将88px添加到scrollTop？

<script>
$(document).on('click', 'a', function(event){
    event.preventDefault();

    $('html, body').animate({
        scrollTop: $( $.attr(this, 'href') ).offset().top + 88;
    }, 500);
});
</script>

Answer 3

仅CSS解决方案

html{
   scroll-behavior: smooth;
}
[id] { scroll-margin-top: 88px }

此CSS将滚动行为设置为平滑，并将页面上的所有锚点设置为具有scroll-margin-top属性，该属性可将滚动捕捉到设置位置。

锚定慢滚动固定标题

3 个答案: