js使用scrollIntoView()被遮挡

使用targetEl.scrollIntoView()，让目标元素滚动到可视区，但是顶部有fixed的标题元素，导致目标元素被遮挡。

1. 使用 scrollIntoView 的 options 参数

targetEl.scrollIntoView({behavior: "smooth", block: "start"});

// 然后稍微延迟执行滚动调整以考虑到固定头部的高度
setTimeout(() => {
  window.scrollBy(0, -fixedHeader.offsetHeight); // 假设fixedHeader是固定定位元素的变量引用
}, 100);

2. 计算偏移量并使用 window.scrollTo

const elementPosition = targetEl.getBoundingClientRect().top + window.pageYOffset;
const offsetPosition = elementPosition - fixedHeader.offsetHeight; // 减去固定头部的高度

window.scrollTo({
  top: offsetPosition,
  behavior: "smooth"
});

3. 使用 CSS scroll-margin-top 属性

.target-element {
  scroll-margin-top: 100px; /* 假设固定头部的高度是100px */
}