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

Question

我有一个锚标签如下：

<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 的标题条，当我点击给定的锚点时，它隐藏了该部分的某些部分。如何在添加一些像素以转义标题的同时使其滚动到给定部分？

Answer 1

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

基本上，您可以通过添加不必要的元素来避免任何欺骗 - 当您通过锚标记导航时（或者如果您设置了原生 css 滚动捕捉 - https://developer.mozilla.org/en-US/docs/网页/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/

Answer 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/