为何点击锚点链接时scroll-behavior: smooth与Lenis库无法正常工作？

核心原因 #

Lenis作为自定义平滑滚动库，会完全接管页面的滚动控制逻辑——它通过requestAnimationFrame模拟滚动动画，直接替代了浏览器原生的滚动行为。启用Lenis后，浏览器原生的scroll-behavior: smooth会被Lenis的自定义逻辑覆盖，导致原生锚点的平滑滚动失效。

解决方法 #

1. 移除原生scroll-behavior配置 #

直接删掉CSS里的scroll-behavior: smooth，Lenis本身已经提供了平滑滚动能力，留着反而会引发冲突。

2. 用Lenis API处理锚点滚动 #

修改锚点的点击逻辑，阻止原生跳转行为，改用Lenis的scrollTo方法实现平滑滚动。修改后的代码如下：

JavaScript 代码

const lenis = new Lenis({
  duration: 2.5
})

// 处理锚点点击事件
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
  anchor.addEventListener('click', (e) => {
    e.preventDefault()
    const targetId = anchor.getAttribute('href')
    const targetElement = document.querySelector(targetId)
    if (targetElement) {
      lenis.scrollTo(targetElement)
    }
  })
})

function raf(time) {
  lenis.raf(time)
  requestAnimationFrame(raf)
}
requestAnimationFrame(raf)

lenis.on('scroll', ScrollTrigger.update)

gsap.ticker.add((time) => {
  lenis.raf(time * 1000)
})

CSS 代码

html {
  /* 移除原生平滑滚动配置 */
  /* scroll-behavior: smooth; */
}

HTML 代码（无需修改）

<h2><a class="c-btn" href="#pages-main">scroll down</a></h2>
 
<section id="pages-main"></section>

修改后，点击锚点会通过Lenis实现平滑滚动，同时和Lenis的全局滚动逻辑保持一致。

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