Lenis 会接管原生滚动行为，导致 scroll-behavior: smooth 失效；必须改用 lenis.scrollTo() 方法显式触发带缓动的锚点滚动，并禁用默认跳转行为。
lenis 会接管原生滚动行为，导致 `scroll-behavior: smooth` 失效；必须改用 `lenis.scrollto()` 方法显式触发带缓动的锚点滚动，并禁用默认跳转行为。
Lenis 是一个高性能、轻量级的自定义滚动库，它通过 requestAnimationFrame 驱动虚拟滚动容器（如 或自定义容器），从而实现更精细的控制与动画效果。但正因如此，它主动拦截并覆盖了浏览器原生的锚点跳转逻辑——当点击 时，浏览器本应触发 scroll-behavior: smooth 的原生平滑滚动，但在 Lenis 启用后，该行为被忽略，页面可能瞬间跳转或完全无响应。
✅ 正确做法：禁用默认锚点跳转，改用 Lenis 提供的 scrollTo() 方法，它支持选择器（如 #pages-main）、DOM 元素、坐标偏移及完整配置项，确保滚动完全受控且平滑。
以下是推荐实现方式（兼容 React + Next.js 及纯 JS 环境）：
✅ React / Next.js（推荐使用 useLenis Hook）
'use client';
import { useLenis } from 'lenis/react';
export default function AnchorLink() {
const lenis = useLenis();
const handleClick = (e: React.MouseEvent) => {
e.preventDefault(); // ⚠️ 关键：阻止默认锚点跳转
lenis?.scrollTo('#pages-main', {
offset: -80, // 可选：顶部留白（如固定导航栏高度）
duration: 2.5,
easing: (t) => Math.min(1, 1.001 - Math.pow(2, -10 * t)), // 自定义缓动
});
};
return (
<a href="#pages-main" onclick="{handleClick}" classname="c-btn">
scroll down
</a>
);
}
✅ 原生 JavaScript（无需框架）
// 初始化 Lenis（确保 DOM 已加载）
const lenis = new Lenis({
duration: 2.5,
easing: (t) => Math.min(1, 1.001 - Math.pow(2, -10 * t)),
});
function raf(time) {
lenis.raf(time);
requestAnimationFrame(raf);
}
requestAnimationFrame(raf);
// 拦截所有内部锚点链接
document.querySelectorAll('a[href^="#"]:not([href="#"])').forEach((link) => {
link.addEventListener('click', (e) => {
e.preventDefault();
const targetId = link.getAttribute('href').slice(1);
const targetEl = document.getElementById(targetId);
if (targetEl) {
lenis.scrollTo(targetEl, {
offset: -80,
duration: 2.5,
});
}
});
});
⚠️ 注意事项
- 务必调用 e.preventDefault()：否则浏览器仍会执行原生跳转，与 Lenis 冲突；
- 避免重复初始化 Lenis：全局只需一个实例；
- scrollTo() 支持多种目标类型：字符串选择器（'#id'）、DOM 元素、{ x, y } 坐标或 window；
- 若配合 GSAP/ScrollTrigger，请确保 lenis.on('scroll', ScrollTrigger.update) 已注册，且 gsap.ticker.add(...) 仅需保留其一（推荐使用 requestAnimationFrame 循环，避免双驱动）；
- 在 Next.js App Router 中，useLenis 必须在 'use client' 组件内调用，且 Lenis 实例应在客户端初始化（不可在服务端渲染中创建）。
通过主动接管锚点逻辑而非依赖 CSS，你不仅能恢复平滑滚动，还能获得更灵活的偏移控制、自定义缓动、滚动中断、进度监听等高级能力——这正是 Lenis 的设计初衷。
