react/vue跳转到文章指定位置简单demo

antd 好像有差不多功能的插件 ， 但要求使用arco ， arco上面的例子就很，，，   或者说根本就没有  不如自己写  ，高度自定义 更加方便 ， 有时候看别人的文档真的挺折磨的 

vue跟react都差不多 ， 主要触发 和 跳转  ，触发写的是函数触发 一眼看懂 ， 跳转也是简单函数 ，上代码

import { Tabs, Typography } from "@arco-design/web-react"

const LiveTextFlow = ({ flowArr }) => {
    // 定义跳转到的位置
    const jumpToAnchor = (anchorId) => {
        const anchorElement = document.getElementById(anchorId);
        if (anchorElement) {
            anchorElement.scrollIntoView({ behavior: 'smooth' });
        }
    };
    const tabsChange = (tabs) => {
        console.log("tabs", tabs)
        if (tabs == 3) {
            jumpToAnchor('section2')
        } else {
            jumpToAnchor('section1')
        }
    }
    
    return (
        <div className="scroll-y h-[70%]">
           
            <Tabs defaultActiveTab='1' onChange={(key) => tabsChange(key)}>
                <Tabs.TabPane key='1' title='Tab 1'></Tabs.TabPane>
                <Tabs.TabPane key='2' title='Tab 2' disabled></Tabs.TabPane>
                <Tabs.TabPane key='3' title='Tab 3'></Tabs.TabPane>
            </Tabs>

            <div className="h-full" style={{ overflowY: 'auto' ,border:'1px solid red' }}>
                <div id="section1" className="">
                    <Typography.Paragraph>This is the content</Typography.Paragraph>
                    <Typography.Paragraph>This is the content</Typography.Paragraph>
                    <Typography.Paragraph>This is the content</Typography.Paragraph>
                    <Typography.Paragraph>This is the content</Typography.Paragraph>
                    <Typography.Paragraph>This is the content</Typography.Paragraph>
                    <Typography.Paragraph>This is the content</Typography.Paragraph>
                    <Typography.Paragraph>This is the content</Typography.Paragraph>
                    <Typography.Paragraph>This is the content</Typography.Paragraph>
                    <Typography.Paragraph>This is the content</Typography.Paragraph>
                    <Typography.Paragraph>This is the content</Typography.Paragraph>
                    <Typography.Paragraph>This is the content</Typography.Paragraph>
                    <Typography.Paragraph>This is the content</Typography.Paragraph>
                    <Typography.Paragraph>This is the content</Typography.Paragraph>
                    <Typography.Paragraph>This is the content</Typography.Paragraph>
                    <Typography.Paragraph>This is the content</Typography.Paragraph>
                    <Typography.Paragraph>This is the content</Typography.Paragraph>
                    <Typography.Paragraph>This is the content</Typography.Paragraph>
                    <Typography.Paragraph>This is the content</Typography.Paragraph>
                    <Typography.Paragraph>This is the content</Typography.Paragraph>
                    <Typography.Paragraph>This is the content</Typography.Paragraph>
                </div>
                <div id="section2">
                    <Typography.Paragraph>@@@@@@@@@@@@@</Typography.Paragraph>
                    <Typography.Paragraph>This is the content</Typography.Paragraph>
                    <Typography.Paragraph>This is the content</Typography.Paragraph>
                    <Typography.Paragraph>This is the content</Typography.Paragraph>
                    <Typography.Paragraph>This is the content</Typography.Paragraph>
                    <Typography.Paragraph>This is the content</Typography.Paragraph>
                    <Typography.Paragraph>This is the content</Typography.Paragraph>
                    <Typography.Paragraph>This is the content</Typography.Paragraph>
                    <Typography.Paragraph>This is the content</Typography.Paragraph>
                    <Typography.Paragraph>This is the content</Typography.Paragraph>
                    <Typography.Paragraph>This is the content</Typography.Paragraph>
                    <Typography.Paragraph>This is the content</Typography.Paragraph>
                    <Typography.Paragraph>This is the content</Typography.Paragraph>
                    <Typography.Paragraph>This is the content</Typography.Paragraph>
                    <Typography.Paragraph>This is the content</Typography.Paragraph>
                    <Typography.Paragraph>This is the content</Typography.Paragraph>
                    <Typography.Paragraph>This is the content</Typography.Paragraph>
                    <Typography.Paragraph>This is the content</Typography.Paragraph>
                    <Typography.Paragraph>This is the content</Typography.Paragraph>
                    <Typography.Paragraph>This is the content</Typography.Paragraph>
                    <Typography.Paragraph>This is the content</Typography.Paragraph>
                </div>
            </div>


        </div>
    )
}

export default LiveTextFlow;