Next.js 客户端组件跨页面跳转时锚点不生效，scrollIntoView 不起作用

本文主要是介绍Next.js 客户端组件跨页面跳转时锚点不生效，scrollIntoView 不起作用，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

项目场景

点击页脚“联系我们”链接，跳转到对应页面的“联系我们”模块。

问题描述

在页脚处“联系我们”代码如下：

<a href="/about_us#contactUs">联系我们</a>

在“联系我们”的组件中写以下代码：

export default function ContactUs() {const scrollToContactUs = () => {const contactUs = document.getElementById('contactUs');if (window.location.hash.indexOf('#contactUs') > -1 && contactUs) {contactUs.scrollIntoView(true);}};useEffect(() => {scrollToContactUs();}, []);return (<div id="contactUs">// 这里是组件内容</div>);
}

页面初始化时并不会定位到“联系我们”模块。即便代码在能获取到 contactUs 元素的情况下调用 scrollIntoView 依然不生效。

解决方案：

使用 window.requestAnimationFrame() 方法。

该window.requestAnimationFrame()方法告诉浏览器您希望执行动画。它请求浏览器在下次重绘之前调用用户提供的回调函数。

export default function ContactUs() {const scrollToContactUs = () => {const contactUs = document.getElementById('contactUs');if (window.location.hash.indexOf('#contactUs') > -1 && contactUs) {window.requestAnimationFrame(() => {contactUs.scrollIntoView(true);})}};useEffect(() => {scrollToContactUs();}, []);return (<div id="contactUs">// 这里是组件内容</div>);
}