Javascript 如何将textarea加载滚动到顶部

我正在为一个网站创建一个“如何”页面，大部分文本被导入到一个文本框中。当文件足够长，可以创建一个滚动条时，您将textarea滚动到底部，然后单击另一个帮助文件，它将加载已经滚动到与以前相同长度的文本。我在下面尝试的是将渲染文本设置为空值以“清除”文本区域，然后在单击时以干净的方式加载文本。第一次加载文本时，它可以正常工作，但如果已经加载了文本，则无法正常工作

我想做的是，它加载文本区域顶部的每个文件

这是主页代码：

const setCreateMission = (e) => {
    setRenderedAboutText();
    setRenderedAboutText(AboutCreateMission);
}
const setAboutMissionReports = (e) => {
    setRenderedAboutText();
    setRenderedAboutText(AboutMissionReports);
}

const setAboutViewMission = (e) => {
    setRenderedAboutText();
    setRenderedAboutText(AboutViewMission);
}

const setAboutDataManagement = (e) => {
    setRenderedAboutText();
    setRenderedAboutText(AboutDataManagement);
}

const setAboutUserManagement = (e) => {
    setRenderedAboutText();
    setRenderedAboutText(AboutUserManagement);
}

const setAboutViewFeedback = (e) => {
    setRenderedAboutText();
    setRenderedAboutText(AboutViewFeedback);
}
    //this renders the components.
    return(
        // this div creates the vertical navigation bar along the left side of the component, and houses the text area that will display the selected text file.
        <div className="container">            
            <div className="card p-0 bg-dark align-items-center">
                <div class="container-fluid h-100">
                    <div class="row h-100">
                        <aside class="col-12 col-md-2 p-0 bg-dark" id="aboutAside">
                            <nav class="navbar navbar-expand navbar-dark bg-dark flex-md-column flex-row align-items-start">
                                <div class="collapse navbar-collapse">
                                    <ul class="flex-md-column flex-row navbar-nav w-100 justify-content-between navbar-dark">
                                    {/* These are all the current items listed in the About page, and this list will, presumably, expand as more features are added in future updates. */}
                                        <li><button class="dm" href="#" onClick={setCreateMission}>Creating Missions</button></li>
                                        <li><button class="dm" href="#" onClick={setAboutViewMission}>Viewing Missions</button></li>
                                        <li><button class="dm" href="#" onClick={setAboutMissionReports}>Mission Reports</button></li>   
                                        <li><button class="dm" href="#" onClick={setAboutDataManagement}>Data Management</button></li>
                                        <li><button class="dm" href="#" onClick={setAboutUserManagement}>User Management</button></li>
                                        <li><button class="dm" href="#" onClick={setAboutViewFeedback}>View Feedback</button></li>                       
                                    </ul>
                                </div>
                            </nav>
                        </aside>
                        <main class="col">
                            {/* this area is where the text area is rendered that will display the selected text. The text itself is rendered in the "renderedAboutText" value, and there is a placeholder line to direct the user to select a file to read. */}
                            <textarea className="form-control rounded-1" id="aboutTextArea" rows="15" placeholder="Please select an option from the side menu." value={renderedAboutText}></textarea>
                        </main>
                    </div>
                </div>
            </div>
        </div>          
    )  
}

const text = 'example text example text blah blah blah'

export default text;