Offsetting an HTML Anchor to Adjust for Fixed Header

技术背景

在网页开发中，当页面存在固定头部（fixed header）时，点击页面内的锚点链接，目标位置往往会被固定头部遮挡。为了解决这个问题，需要对锚点的位置进行偏移调整，以确保目标内容能完整显示在固定头部下方。

实现步骤

1. CSS 解决方案

方案一：使用相对定位

为锚点添加类名，并通过相对定位进行偏移。

<a class="anchor" id="top"></a>

a.anchor {
    display: block;
    position: relative;
    top: -250px;
    visibility: hidden;
}

方案二：结合 padding 和 margin

<a name="myanchor">
    <h1 style="padding-top: 40px; margin-top: -40px;">My anchor</h1>
</a>

方案三：使用 :target 伪类

:target::before {
    content: '';
    display: block;
    height: 180px;
    margin-top: -180px;
}

2. JavaScript 解决方案

方案一：纯 JavaScript 方案

(function(document, history, location) {
    var HISTORY_SUPPORT = !!(history && history.pushState);

    var anchorScrolls = {
        ANCHOR_REGEX: /^#[^ ]+$/,
        OFFSET_HEIGHT_PX: 50,

        init: function() {
            this.scrollToCurrent();
            window.addEventListener('hashchange', this.scrollToCurrent.bind(this));
            document.body.addEventListener('click', this.delegateAnchors.bind(this));
        },

        getFixedOffset: function() {
            return this.OFFSET_HEIGHT_PX;
        },

        scrollIfAnchor: function(href, pushToHistory) {
            var match, rect, anchorOffset;

            if(!this.ANCHOR_REGEX.test(href)) {
                return false;
            }

            match = document.getElementById(href.slice(1));

            if(match) {
                rect = match.getBoundingClientRect();
                anchorOffset = window.pageYOffset + rect.top - this.getFixedOffset();
                window.scrollTo(window.pageXOffset, anchorOffset);

                if(HISTORY_SUPPORT && pushToHistory) {
                    history.pushState({}, document.title, location.pathname + href);
                }
            }

            return !!match;
        },

        scrollToCurrent: function() {
            this.scrollIfAnchor(window.location.hash);
        },

        delegateAnchors: function(e) {
            var elem = e.target;

            if(
                elem.nodeName === 'A' &&
                this.scrollIfAnchor(elem.getAttribute('href'), true)
            ) {
                e.preventDefault();
            }
        }
    };

    window.addEventListener(
        'DOMContentLoaded', anchorScrolls.init.bind(anchorScrolls)
    );
})(window.document, window.history, window.location);

方案二：jQuery 方案

(function($, window) {
    var adjustAnchor = function() {
        var $anchor = $(':target'),
            fixedElementHeight = 100;

        if ($anchor.length > 0) {
            $('html, body')
              .stop()
              .animate({
                    scrollTop: $anchor.offset().top - fixedElementHeight
                }, 200);
        }
    };

    $(window).on('hashchange load', function() {
        adjustAnchor();
    });
})(jQuery, window);

最佳实践

• 优先考虑 CSS 解决方案，因为它简单、性能好，且不需要额外的 JavaScript 代码。
• 如果需要动态调整偏移量或实现平滑滚动效果，可使用 JavaScript 或 jQuery 方案。
• 对于不同浏览器的兼容性问题，可以使用 CSS hacks 或条件注释来解决。

常见问题

• 布局破坏：使用相对定位或绝对定位可能会破坏页面布局。可以尝试使用 padding 和 margin 来解决。
• 兼容性问题：某些 CSS 特性或 JavaScript 事件在旧浏览器中可能不支持。可以使用现代浏览器检测工具或提供备用方案。
• 动画效果卡顿：在某些设备上，动画效果可能会卡顿。可以调整动画的持续时间或使用 CSS 动画来提高性能。