Question

我有一个锚标记如下：

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

导航到ID为＆＃39; map_4D85448A3D4C4180A02BD6FC387ABC45＆＃39;的部分。跳跃功能如下：

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

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/

使用href =＆＃34;＃id＆＃34;时添加padding-top滚动

2 个答案: