设置window.location.hash后，div元素被顶部导航栏遮挡的问题

这个场景我太熟悉了！当你通过window.location.hash跳转到锚点元素时，浏览器默认会把目标元素的顶部对齐视口顶部，但如果页面有固定/粘性的导航栏占着顶部位置，就会刚好挡住目标元素的上半部分。下面给你几个简单有效的解决办法：

方法1：用CSS scroll-margin-top（推荐，最简单） #

这是现代浏览器原生支持的方案，直接给目标元素设置顶部滚动边距，数值等于你的粘性导航栏高度就行：

#login-control {
  /* 把60px换成你实际的导航栏高度 */
  scroll-margin-top: 60px;
}

原理很简单：浏览器滚动到这个元素时，会自动在顶部留出你设置的margin空间，完美避开导航栏。

方法2：全局设置scroll-padding-top #

如果你的页面所有锚点都需要避开导航栏，不用逐个元素设置，直接给整个页面的滚动容器（一般是html）设置顶部滚动内边距：

html {
  scroll-padding-top: 60px; /* 同样替换成导航栏高度 */
}

这样所有锚点跳转都会自动适配，省心很多。

方法3：JavaScript动态调整（兼容旧浏览器/动态高度场景） #

如果需要兼容一些老浏览器，或者导航栏高度会随屏幕尺寸变化（比如移动端折叠/展开），可以用JS手动计算并调整滚动位置：

// 先设置锚点
window.location.hash = '#login-control';

// 获取目标元素和导航栏
const targetEl = document.getElementById('login-control');
const navBar = document.querySelector('.your-sticky-nav-class'); // 替换成你的导航栏选择器

if (targetEl && navBar) {
  // 计算目标位置：元素顶部的绝对位置减去导航栏高度
  const navHeight = navBar.offsetHeight;
  const targetPosition = targetEl.getBoundingClientRect().top + window.pageYOffset - navHeight;
  
  // 滚动到目标位置，可选平滑滚动
  window.scrollTo({
    top: targetPosition,
    behavior: 'smooth'
  });
}

// 如果你想处理所有锚点跳转，可以监听hashchange事件
window.addEventListener('hashchange', () => {
  const targetId = window.location.hash.slice(1);
  const targetEl = document.getElementById(targetId);
  if (!targetEl) return;
  
  const navBar = document.querySelector('.your-sticky-nav-class');
  const navHeight = navBar.offsetHeight;
  const targetPosition = targetEl.getBoundingClientRect().top + window.pageYOffset - navHeight;
  
  window.scrollTo({
    top: targetPosition,
    behavior: 'smooth'
  });
});

这个方法能动态适配导航栏的实时高度，灵活性更高。

内容的提问来源于stack exchange，提问作者M Saadat