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

hh湫丶

已于 2024-03-31 18:03:50 修改

阅读量448

点赞数 1

文章标签： javascript html react

于 2024-03-31 18:00:06 首次发布

本文链接：https://blog.csdn.net/lovezhuer1/article/details/137202340

版权

文章讲述了在React项目中，如何修复页面加载初期联系我们模块无法自动滚动到的问题，通过引入window.requestAnimationFrame方法确保在正确时机执行scrollIntoView操作。

摘要由CSDN通过智能技术生成

项目场景

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

问题描述

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

<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>
  );
}