React项目常遇到滚动元素或页面 到 顶部位置（或指定位置）

方案一：操作window 滚动页面到顶部

window.scrollTo(x, y)
// x轴方向px数值
// y轴方向px数值

• window.scrollTo(0, 0) 滚动到左上角
• 指定数值可以滚动到指定位置

.

方案二：用 useRef 得到指定元素操作

import React, { useRef } from "react";

function DEMO() {
    const pageView = useRef(null);

    function handleClick() {
        pageView.current.scrollTop = 0;
    }

    return (
        <div
            ref={pageView}
            onClick={handleClick}
            style={{height: '100vh', overflow: "scroll"}}
        >
            <div style={{height: '200vh'}}>点击回到顶部</div>
        </div>
    )
};

export default DEMO;

• 定义：overflow 和 height
• 元素： 滚动 外层元素

.

方案三：用 scrollIntoView 指定元素滚动

import React from "react";

function DEMO() {
    function handleClick() {
        let getEle = document.getElementById('pageView');
        getEle.scrollIntoView();
    }

    return (
        <div
            onClick={handleClick}
            style={{ height: '100vh', overflow: "scroll" }}
        >
            <div id='pageView' style={{ height: '200vh' }}>回到顶部</div>
        </div>
    )
};

export default DEMO;

• 元素： 内层元素，让哪个元素到顶部获取该元素
• scrollIntoView() 滚动样式，查看：https://blog.csdn.net/weixin_44461275/article/details/120778081

.

方案四：原生JS 操作指定元素滚动

import React from "react";

function DEMO() {
    
    function handleClick() {
        document.getElementById('pageView').scrollTop = 0;
    }

    return (
        <div
            id='pageView'
            onClick={handleClick}
            style={{height: '100vh', overflow: "scroll"}}
        >
            <div style={{height: '200vh'}}>点击回到顶部</div>
        </div>
    )
};

export default DEMO;

---

好了，到此结束，有问题留言。若对你有帮助，点赞收藏支持下