网站Tab切换自动滚至内容顶部及平滑滚动实现方案咨询

关键修改方案 #

1. 在Tab切换逻辑中加入滚动定位代码，点击Tab时自动滚动到内容区域顶部
2. 利用浏览器原生API实现平滑滚动动画
3. 修复内容区域交互被禁用的问题

修改后的JavaScript代码 #

const btn = [].slice.call(document.getElementsByTagName('button'));
const header = document.getElementById("myHeader");
const tabContainer = document.getElementById('tab');
const headerHeight = header.offsetHeight; // 获取header高度，避免滚动后内容被遮挡

btn.forEach((item, index) => {
  item.addEventListener('click',function(){
    // 切换Tab激活状态
    btn.forEach((item) => {item.classList.remove('active')});
    item.classList.add('active');
    document.getElementById('tab').setAttribute('data-tab', index);
    
    // 平滑滚动到Tab内容区域顶部
    window.scrollTo({
      top: tabContainer.offsetTop - headerHeight,
      behavior: 'smooth'
    });
  });
});

// 原sticky header逻辑保留
window.onscroll = function() {myFunction()};
var sticky = header.offsetTop;

function myFunction() {
  if (window.pageYOffset > sticky) {
    header.classList.add("sticky");
  } else {
    header.classList.remove("sticky");
  }
}

修改后的CSS代码 #

button {background-color:#000;color:#fff}

.wrapper {
    overflow: hidden;
}

.tabs {
    position: relative;
    -webkit-transition: all .9s ease-in-out; 
    -moz-transition: all .9s ease-in-out; 
    -ms-transition: all .9s ease-in-out; 
    -o-transition: all .9s ease-in-out; 
    transition: all .9s ease-in-out;
    /* 移除pointer-events:none，恢复内容区正常交互 */
}

.tabs> * {
    width: 100%;
}

.tabs[data-tab='1'] {
    transform: translateX(-100%);
}

.tabs[data-tab='2'] {
    transform: translateX(-200%);
}
.tabs[data-tab='3'] {
    transform: translateX(-300%);
}
.tabs[data-tab='4'] {
    transform: translateX(-400%);
}

.inliner {
    white-space: nowrap;
}

.inliner > * {
    display: inline-block;
    *display: inline;
    *zoom: 1;
    font-size: 1rem;
    letter-spacing: normal;
    vertical-align: top;
    word-spacing: normal;
    white-space: normal;
}

.sticky {
  position: fixed;
  top: 0;
  width: 100%;
  background-color: #000; /* 添加背景色防止内容穿透 */
}

.textabove {
  font-size:40px;
  margin-bottom:40px;
}

HTML代码无需调整 #

改动说明 #

• 滚动定位：通过window.scrollTo指定滚动目标位置，减去header高度是为了避免sticky状态的header遮挡内容区域顶部
• 平滑动画：设置behavior: 'smooth'启用原生平滑滚动，现代浏览器均支持该属性
• 交互修复：移除.tabs的pointer-events:none，否则无法选中内容文本或点击内部元素
• 视觉优化：给sticky header添加背景色，防止下方内容穿透显示

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