title: Scroll to table row or list item in an Angular app
body: <p>In the code snapshot below in <code>app.component.html</code>, I display clickable rows in a table in Lines 39 to 58. Once the user clicks a row, I display other relevant rows in a table named <code>suraTable</code> as shown in Lines 63 to 77. Namely, when the user clicks on a row, the function <code>onSelectAya(aya, suraTable)</code> in <code>app.component.ts</code> is called. That function loads the necessary rows and the table is displayed. </p>
  
  <p>What I am stuck with is this. Suppose <code>suraTable</code> ends up with 100 rows. The current behaviour is that rows 1, 2, 3... are displayed of course. I need to be able to show the table at Row 50 say (information carried in the parameter <code>aya</code> on Line 91). How do I scroll to that position? I tried the <a href="https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollTop" rel="nofollow noreferrer">scrollTop</a> way but when checking the values before and after the setting of <code>suraTable.scrollTop</code>, the value is always 0 (0 pixels that is). Line 100 shows that when <code>console.log(suraTable)</code> is reached, expected output is generated in the browser, which means that I am getting hold of the element correctly to start with.</p>
  
  <p>So, how do I scroll to a specific row in a table, or to an item in a list (I could convert the whole structure to a list if easier) from within the <code>app.component.ts</code> component? Thank you.</p>
  
  <p><a href="https://i.stack.imgur.com/RZvjh.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/RZvjh.png" alt="enter image description here"></a></p>