使用 href="#id" 时添加 padding-top 以滚动答案

【问题标题】：Add padding-top to scroll when using href="#id"使用 href="#id" 时添加 padding-top 以滚动
【发布时间】：2022-02-04 17:58:42
【问题描述】：

我有一个锚标记如下：

<a href="#map_4D85448A3D4C4180A02BD6FC387ABC45" onclick="jumptosection('map_4D85448A3D4C4180A02BD6FC387ABC45');">A Guide</a>

它导航到 ID 为“map_4D85448A3D4C4180A02BD6FC387ABC45”的部分。 jumptosection函数如下：

function jumptosection(id) {
    var target = document.getElementById(id);
    if(document.all){
        document.documentElement.scrollTop = target.offsetTop;
    }else{
        var top = 0;
        do {
            top += target.offsetTop  || 0;
            target = target.offsetParent;
        } while(target);

        document.body.scrollTop = top ;
    }
    //$('#article').css.paddingTop = '55px';
    return false;

但是即使我在这个函数中什么都不写，行为仍然是一样的。问题是我有一个 92px 的标题条，当我单击给定的锚点时，它隐藏了该部分的某些部分。如何在添加一些像素以转义标题时使其滚动到给定部分？

【问题讨论】：

您还没有显示代码的重要部分 - jumptosection() 函数 - 所以我不能给你一个例子，但你只需要从top被跳转到的元素的位置。
@RoryMcCrossan 每个解决方案都不需要代码。如果用户禁用 js，问题仍然存在。

标签： javascript jquery html css

【解决方案1】：

虽然选择的答案可以达到目的，但我们现在有明确的 CSS 属性，称为 scroll-margin。

基本上，您可以通过添加不必要的元素来避免任何诡计 - 此边距仅在您通过锚标记导航时计算（或者如果您已设置原生 css 滚动捕捉 - https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Scroll_Snap/Basic_concepts）。

将它与 CSS 变量一起使用非常有用。如果您有一个固定/粘性标题，这是一个示例：

/* Set the header variable */

--h-header: 50px;

/* Set the scroll margin top on all anchor elements by using .anchor class */
/* Note: I'm setting plus 2.5em so the element has some breathing room on the top */

.anchor {
    scroll-margin-top: calc(var(--h-header) + 2.5em);
}

MDN 文档：https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-margin

CSS 技巧指南：https://css-tricks.com/almanac/properties/s/scroll-margin/

【讨论】：

很好的答案！我知道scroll-padding-top（它不适用于锚标签，只有domNode.scrollIntoView()）但不知道scroll-margin-top。

【解决方案2】：

这是可能的。我会在没有 javascript 的情况下这样做，所以它适用于所有人。甚至不需要对您的 JS 进行任何更改。

您只需要在要滚动到的元素上方创建一个空元素。 CSS 具有魔力。它会在您偏移的高度创建一个隐藏框：

HTML：

<span class="anchor" id="map_4D85448A3D4C4180A02BD6FC387ABC45"></span>
<h1>Element to scroll to</h1>

CSS：

.anchor {
    display: block;
    height: 92px;
    margin-top: -92px;
    visibility: hidden;
}

在此处查看工作演示： https://jsfiddle.net/eczxm1rs/1/

【讨论】：