Javascript：按下Enter键时，滚动到div的顶部

Question

我有一个关于滚动顶部的问题。 我正在为我的任务使用react js Scrollbars库。 当我向下滚动并在文本框中按Enter键时，该div应该有一个滚动顶部。

我已将以下代码用于任务。

 import React from 'react' import { Scrollbars } from 'react-custom-scrollbars' class ScrollBarTask extends React.Component { handleUserInput = (e) => { if (e.key === 'Enter') { var element = document.querySelector('.parentDiv') element.scrollTop = element.scrollHeight; element.scrollTop = 0; } } render(){ return( <div> <input type="text" placeholder="Enter Value..." value={} onKeyPress={e => this.handleUserInput(e)} /> <Scrollbars style={{ height: window.innerHeight - 110), clear: "both", backgroundColor: '#EBECED' }} autoHide={true}> <div className="parentDiv"> <div>dummy data</div><br><br><br><br> <div>dummy data</div><br><br><br><br> <div>dummy data</div><br><br><br><br> <div>dummy data</div><br><br><br><br> <div>dummy data</div><br><br><br><br> <div>dummy data</div><br><br><br><br> </div> </Scrollbars> </div> ) } } export default ScrollBarTask 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script> 

任何帮助都会很棒。

谢谢。

Answer 1

我会在您的函数中使用它：

document.getElementById('youridhere').scrollIntoView();

然后，您可以按照自己的意愿为滚动动画

Answer 2

 import React from 'react' import { Scrollbars } from 'react-custom-scrollbars' class ScrollBarTask extends React.Component { handleUserInput = (e) => { if (e.key === 'Enter') { var element = document.getElementById('parentDivID').scrollIntoView({ block: 'start', behavior: 'smooth' }); } } render(){ return( <div> <input type="text" placeholder="Enter Value..." value={} onKeyPress={e => this.handleUserInput(e)} /> <Scrollbars style={{ height: window.innerHeight - 110), clear: "both", backgroundColor: '#EBECED' }} autoHide={true}> <div className="parentDiv" id="parentDivID"> <div>dummy data</div><br><br><br><br> <div>dummy data</div><br><br><br><br> <div>dummy data</div><br><br><br><br> <div>dummy data</div><br><br><br><br> <div>dummy data</div><br><br><br><br> <div>dummy data</div><br><br><br><br> </div> </Scrollbars> </div> ) } } export default ScrollBarTask 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script> 

为了顺利滚动，您可以参考此链接。

希望这可以帮助。