React中点击按钮滚动到指定div元素功能失效如何解决

核心问题 #

你调用的scrollTo()方法是用于滚动当前元素内部的内容的，而你要实现的是「滚动页面到指定元素所在位置」，应该调用Element.scrollIntoView()方法。

其他潜在问题 #

• 你绑定ref的目标div没有设置高度、也没有子内容，元素高度为0的情况下无法被正常定位
• React中元素的类名属性要写className而非class，否则属性不会被正常识别

修复后代码 #

import React, { useRef } from 'react'

function TeamOld() {
    const myRef = useRef(null)

    const scrollToTarget = () => {
        // 先判空避免ref未初始化报错
        if(myRef.current) {
            // 滚动到元素位置，behavior设为smooth可以实现平滑滚动
            myRef.current.scrollIntoView({ behavior: 'smooth', block: 'start' })
            console.log("Test")
        }
    }

    return (
        <div>
                <button className="button is-primary is-outlined mr-4 mb-2" onClick={scrollToTarget}>Click me</button>
            {/* 这里是页面其他内容，建议添加足够多的内容撑开页面高度，才能看到滚动效果 */}
            <div style={{ width: "100%", height: "200px", marginTop: "1000px" }} ref={myRef}>
                目标元素
            </div>
        </div>
    )
}
export default TeamOld

额外说明 #

scrollIntoView的常用配置参数：

• behavior：滚动动效，可选值为auto（无动画直接跳转）、smooth（平滑滚动）
• block：垂直方向对齐规则，可选值为start（元素顶部对齐视口顶部）、center（元素在视口居中）、end（元素底部对齐视口底部）

如果你实际需求是滚动目标div内部的内容到顶部，需要先给该div设置固定高度和overflow: auto属性，同时确保div内部有足够多的内容触发滚动，再调用myRef.current.scrollTo(0, 0)即可生效。

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