当使用href="#id"时，添加padding-top来滚动

Add padding-top to scroll when using href="#id"

本文关键字：quot 添加 padding-top 滚动 #id href      更新时间：2023-09-26

我有一个锚标记如下:

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

它导航到id为'map_4D85448A3D4C4180A02BD6FC387ABC45'的部分。jump - section函数如下:

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的标题条隐藏了部分。我如何使它滚动到给定的部分，同时添加一些像素来逃避标题?

虽然选择的答案满足目的，但我们现在有了明确的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 Docs: https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-margin

CSS-Tricks guide: https://css-tricks.com/almanac/properties/s/scroll-margin/

这是可能的。我会这样做没有javascript，所以它适用于所有。甚至不需要对你的JS做任何改变。

你只需要在你想滚动到的元素上方创建一个空元素。CSS发挥了神奇的作用。它在你的高度创建一个隐藏框offset:

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/

相关文章：