a标签锚点的跳转至非页面顶部

最新推荐文章于 2025-05-27 21:51:43 发布

xiting_blog

最新推荐文章于 2025-05-27 21:51:43 发布

阅读量1.1k

点赞数

CC 4.0 BY-SA版权

分类专栏： JavaScript0 文章标签：前端

本文链接：https://blog.youkuaiyun.com/onemango/article/details/88767545

JavaScript0 专栏收录该内容

5 篇文章

订阅专栏

本文介绍了如何解决a标签锚点跳转时被页面中固定定位元素遮挡的问题。通过调整跳转方式，确保锚点定位到目标元素的正确位置，提供了一个代码示例来实现这一功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

a标签锚点的跳转至非页面顶部

a标签锚点跳转永远是在页面顶部，如果上方有固定定位的元素，固定定位的元素会压盖住锚点跳转过来的元素，使用以下代码，模拟锚点跳转

// An highlighted block
var fixedNavHeight = $('.nav-bar').outerHeight();
if (window.location.hash.indexOf('#') >= 0) {
    $('html,body').animate({
        scrollTop: ($(window.location.hash).offset().top - fixedNavHeight) + "px"
    }, 300);
};
$('.bs-nav-a a[href^=#][href!=#]').click(function() {
    var target = document.getElementById(this.hash.slice(1));
    if (!target) return;
    var targetOffset = $(target).offset().top - fixedNavHeight;
    $('html,body').animate({
            scrollTop: targetOffset
        },
        300);
    return false;
});