0

I am new to the web Development. Here I have a table, in that table,

<tbody>
<tr>
<td>
</td>
</tr>
</tbody>

Now, it has a scrollbar as it has a fixed height. Now, I have 50 tr in that table, So, user is scrolling that table . Now, I have a button on click of that one more gets added it gets added in the first position. SO, user has scrolled the table, and the also gets added. Now, what I want to do is as soon as row gets added , the scroll bar should be at top so that user will immediately see the newly added row.

is there any way to do this ?

ganesh kaspate
  • 1
  • 9
  • 41
  • 88
  • 1
    You'll find what you need (and probably more) in [Scroll to the top of the page using JavaScript/jQuery?](https://stackoverflow.com/questions/1144805/scroll-to-the-top-of-the-page-using-javascript-jquery) – sjahan Mar 14 '19 at 12:20
  • So, here is widnow that means it will be for the browsers right. what abouy the tabel ? – ganesh kaspate Mar 14 '19 at 12:26

2 Answers2

2

You can use antd library made for react to implement it.

In it specifically, you can use prop validateFieldsAndScroll. For example in your case your handleSubmit function will be something like:

handleSubmit = (e) => {
    e.preventDefault();
    this.props.form.validateFieldsAndScroll((err, values) => {
      if (!err) {
        console.log('Received values of form: ', values);
      }
    });
  }
Sania Khushbakht Jamil
  • 812
  • 6
  • 16
1

You can use the Element.scrollTo function (https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollTo) e.g.

document.querySelector('tbody').scrollTo(0, 0)

EDIT:

The React way would be something like this:

render() {
  return (
    <table>
      <tbody ref={ref=>this.tbody = ref}>
      ...

and then in an onClick handler:

onClick() {
  // add the new row
  const rowsWithNewRow = ...
  this.setState({rows:rowsWithNewRow})
  this.tbody.scrollTo(0,0)
  ...
jsdeveloper
  • 3,945
  • 1
  • 15
  • 14