解决带固定头部导航的跨页面Y轴精准滚动问题

// code of the destination page
if (location.hash = "phone.html#live") { // 这是一个赋值操作，而不是比较
  scrollex();
}
if (location.hash = "phone.html#history") { // 同上
  scrollexTwo();
}

// 示例：修改后的滚动函数
function scrollex() {
  console.log("scrollex executed");
  setTimeout(() => {
    // 假设固定头部高度为200px
    const fixedHeaderHeight = 200;
    // 假设目标元素'#live'的理想顶部位置是630px
    // 实际上，我们应该动态获取目标元素的位置
    const targetY = 630 - fixedHeaderHeight; 
    window.scroll(0, targetY > 0 ? targetY : 0); // 确保不滚动到负值
  }, 1); // 1毫秒的延迟通常足够
}

function scrollexTwo() {
  console.log("scrollexTwo executed");
  setTimeout(() => {
    const fixedHeaderHeight = 200;
    const targetY = 1320 - fixedHeaderHeight;
    window.scroll(0, targetY > 0 ? targetY : 0);
  }, 1);
}

// 假设这是目标页面的JavaScript
document.addEventListener('DOMContentLoaded', () => {
    const fixedNav = document.getElementById('nav'); // 假设导航栏有ID 'nav'
    const fixedHeaderHeight = fixedNav ? fixedNav.offsetHeight : 0; // 获取导航栏高度

    // 监听URL哈希变化或在页面加载时检查哈希
    function handleHashScroll() {
        if (location.hash) {
            const targetId = location.hash.substring(1); // 移除 '#'
            const targetElement = document.getElementById(targetId);

            if (targetElement) {
                setTimeout(() => {
                    // 获取目标元素相对于文档顶部的距离
                    const elementOffsetTop = targetElement.getBoundingClientRect().top + window.pageYOffset;
                    // 减去固定头部的高度
                    const scrollToY = elementOffsetTop - fixedHeaderHeight;

                    window.scroll(0, scrollToY > 0 ? scrollToY : 0);
                }, 10); // 稍微增加延迟，确保DOM和样式完全计算完毕
            }
        }
    }

    // 页面加载时执行一次
    handleHashScroll();
    // 如果需要，也可以监听hashchange事件，但对于跨页面跳转，DOMContentLoaded通常足够
    // window.addEventListener('hashchange', handleHashScroll);
});

<nav id="nav">
  <a class="link" id="news" href="phone.html">NEWS</a>
  <a class="link" id="live" href="phone.html#live">LIVE</a>
  <a class="link" id="history" href="phone.html#history">HISTORY</a>
  <a class="link" id="shop" href="phone.html#shop">SHOP</a>
  <div class="dividoNav"></div>
</nav>

<!-- 假设这是phone.html中的内容 -->
<div id="live" style="margin-top: 500px; height: 300px; background-color: lightblue;">
  <!-- LIVE 内容 -->
  <h2>Live Section</h2>
  <p>This is the live content.</p>
</div>

<div id="history" style="margin-top: 500px; height: 300px; background-color: lightgreen;">
  <!-- HISTORY 内容 -->
  <h2>History Section</h2>
  <p>This is the history content.</p>
</div>

document.addEventListener('DOMContentLoaded', () => {
    const fixedNav = document.getElementById('nav');
    const fixedHeaderHeight = fixedNav ? fixedNav.offsetHeight : 0;

    function handleHashScroll() {
        if (location.hash) {
            const targetId = location.hash.substring(1);
            const targetElement = document.getElementById(targetId);

            if (targetElement) {
                setTimeout(() => {
                    // 使用 scrollIntoView 滚动到元素顶部
                    targetElement.scrollIntoView({
                        behavior: 'smooth', // 可以选择 'auto' 或 'smooth'
                        block: 'start' // 将元素的顶部与视口顶部对齐
                    });

                    // 由于 scrollIntoView 默认会将元素顶部对齐到视口顶部，
                    // 如果有固定头部，需要再向上微调滚动位置
                    if (fixedHeaderHeight > 0) {
                        window.scrollBy(0, -fixedHeaderHeight);
                    }
                }, 10);
            }
        }
    }
    handleHashScroll();
});