如何在JS中点击按钮时平滑滚动到指定元素而非固定top值

嘿，我知道你现在卡在怎么把固定的滚动数值换成目标元素的位置了，别着急，这就给你说清楚怎么改！

你之前直接用contact是不行的，因为window.scroll()的top参数需要的是一个数值（距离文档顶部的像素数），而contact是DOM元素对象，自然不兼容。下面给你两种靠谱的解决办法：

方法一：获取元素的offsetTop值 #

offsetTop会返回元素相对于文档顶部的距离（像素值），刚好符合window.scroll()的top参数要求。修改后的代码如下：

const goToContact = () => { 
  const button = document.getElementsByClassName("employers-button")[0]; 
  const contact = document.getElementById("contact"); 
  // 先判断元素是否存在，避免找不到元素报错
  if (!button || !contact) return;
  
  button.addEventListener("click", (event)=>{ 
    event.preventDefault(); 
    window.scroll({ 
      top: contact.offsetTop, // 替换成元素的offsetTop数值
      behavior: 'smooth' 
    }); 
  }); 
}

小提示：如果你的页面有带滚动的父容器，offsetTop是相对于最近的定位父元素的，这种情况可以用getBoundingClientRect()计算更准确的文档位置：

const rect = contact.getBoundingClientRect();
window.scroll({
  top: rect.top + window.pageYOffset,
  behavior: 'smooth'
});

方法二：用更简洁的scrollIntoView() #

这是浏览器原生的API，专门用来让元素滚动到视图范围内，代码更简洁，也不用自己计算位置，推荐用这个！

const goToContact = () => { 
  const button = document.getElementsByClassName("employers-button")[0]; 
  const contact = document.getElementById("contact"); 
  if (!button || !contact) return;
  
  button.addEventListener("click", (event)=>{ 
    event.preventDefault(); 
    // 让元素平滑滚动到视图顶部（block: 'start'是默认值，也可以设为'center'让元素居中显示）
    contact.scrollIntoView({ behavior: 'smooth', block: 'start' }); 
  }); 
}

另外还要注意原代码里的一个小问题：你在回调里用了event但没把它作为参数传进去，严格模式下会报错，所以一定要加上(event)哦！

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