如何借助jQuery实现Bootstrap导航栏跨页面滚动到指定区块？

问题根源 #

你原来的代码用e.preventDefault()阻止了所有导航链接的默认跳转行为，不管是单页面锚点还是跨页面链接，所以点击指向index2.html的链接时，页面不会跳转，自然没法实现跨页面滚动。另外跨页面场景下，滚动逻辑需要在目标页面加载完成后再执行。

解决方案 #

1. 修改原单页面的导航点击事件 #

先区分链接是同页面锚点还是跨页面链接，只对同页面锚点阻止默认行为并执行平滑滚动，跨页面链接让浏览器正常跳转：

// Find the navbar menu link
let topMenu = $(".navbar-nav"),
    topMenuHeight = topMenu.outerHeight(),
    // All list items
    menuItems = topMenu.find("a");

// Bind click handler to menu items
menuItems.click(function(e){
    let href = $(this).attr("href");
    // 判断是否为同页面锚点（以#开头且不是单独的#）
    if (href.startsWith("#") && href !== "#") {
        let offsetTop = $(href).offset().top - topMenuHeight - 80;
        $('html, body').stop().animate({ 
            scrollTop: offsetTop
        }, 500);
        e.preventDefault(); // 仅阻止同页面锚点的默认行为
    }
    // 跨页面链接不做阻止，让浏览器正常跳转
});

2. 在目标页面（index2.html）添加加载完成后的滚动逻辑 #

跳转到index2.html后，页面加载完成时读取URL中的锚点参数，执行平滑滚动：

$(document).ready(function(){
    let topMenuHeight = $(".navbar-nav").outerHeight();
    // 获取URL中的锚点部分
    let hash = window.location.hash;
    if (hash && hash !== "#") {
        // 确认目标元素存在
        if ($(hash).length > 0) {
            let offsetTop = $(hash).offset().top - topMenuHeight - 80;
            $('html, body').stop().animate({ 
                scrollTop: offsetTop
            }, 500);
        }
    }
});

3. 导航链接格式要求 #

确保指向index2.html的链接格式正确，比如：

<a href="index2.html#target-div">跳转到index2的目标区块</a>

其中#target-div是index2.html中需要滚动到的div的ID。

补充优化 #

• 如果页面包含图片等异步加载资源，建议用$(window).on('load', function(){...})替代$(document).ready()，确保所有元素加载完成后再计算滚动位置
• 可将偏移量计算逻辑抽成通用函数，避免重复代码：

function getScrollOffset(targetSelector) {
    let topMenuHeight = $(".navbar-nav").outerHeight();
    return $(targetSelector).offset().top - topMenuHeight - 80;
}

内容的提问来源于stack exchange，提问作者a.tarparelli