React中如何为scrollIntoView添加滚动偏移量

你可以通过两种方式给滚动位置添加偏移量，避免标题被截断：

方法一：JavaScript计算偏移量手动滚动 #

直接获取目标元素的顶部位置，减去需要预留的空间（比如导航栏高度），调用window.scrollTo实现带偏移的平滑滚动：

import React, { useRef } from 'react'
import Form from '@/components/Form/Form'

export default function index() {
  const ref = useRef(null)
  const scrollToForm = () => {
    if (!ref.current) return;
    // 计算目标元素顶部位置，减去80px偏移量（可根据实际需求调整）
    const targetPosition = ref.current.offsetTop - 80;
    window.scrollTo({
      top: targetPosition,
      behavior: 'smooth'
    });
  }

  return (
    <div className='px-8 mb-40'>
      <button onClick={scrollToForm}>滚动到表单区域</button>

      <div className='flex flex-col justify-center items-center mv:px-8 md:px-0 mb-12 mt-80' ref={ref} id="reference">
        <h1 className='text-4xl text-center mb-4 w-4/12'>
          Let's get started
        </h1>
        <p className='text-center mv:w-full sm:w-500'>
          Don't wait any longer. Fill out the form below and we will review
          your request and respond via email.
        </p>
      </div>
      <Form />
    </div>
  )
}

方法二：CSS scroll-margin-top 属性（更简洁） #

给目标元素添加scroll-margin-top样式，设置需要预留的偏移空间，调用scrollIntoView时会自动留出偏移量：

先给目标元素新增一个类名（比如scroll-offset-target），然后在CSS中设置：

.scroll-offset-target {
  scroll-margin-top: 80px; /* 替换成你需要的偏移量 */
}

再修改组件代码，保持scrollIntoView的调用即可：

import React, { useRef } from 'react'
import Form from '@/components/Form/Form'

export default function index() {
  const ref = useRef(null)
  const scrollToForm = () => ref.current?.scrollIntoView({ behavior: 'smooth', block: 'start' })

  return (
    <div className='px-8 mb-40'>
      <button onClick={scrollToForm}>滚动到表单区域</button>

      <div className='flex flex-col justify-center items-center mv:px-8 md:px-0 mb-12 mt-80 scroll-offset-target' ref={ref} id="reference">
        <h1 className='text-4xl text-center mb-4 w-4/12'>
          Let's get started
        </h1>
        <p className='text-center mv:w-full sm:w-500'>
          Don't wait any longer. Fill out the form below and we will review
          your request and respond via email.
        </p>
      </div>
      <Form />
    </div>
  )
}

两种方法都能解决标题被截断的问题：方法二写法更简洁，适合现代浏览器；方法一兼容性更好，适合需要支持旧浏览器的场景。

内容的提问来源于stack exchange，提问作者maxheezy's