How to scroll a <ul> list to my specific <li> after selecting an item that loads the page again?

Question

I have a list <ul> with several <li>, when an item is selected this <li> receives a "Selected id".

<ul id="lista-produtos">
  <li>produto 1</li>
  <li>produto 2</li>
  <li id="selected">produto 3</li>
  <li>produto 50</li>
</ul>

When I click on one <li>, it reloads the page and selects the corresponding element in the list. However, I would need the list to scroll to the selected element after selecting the item. You can help me?

I tried to use the code below with scrollTop, but without success.

$('#lista-produtos').scrollTop($('#selected:nth-child()').position().top);

Answer 1

To scroll to a specific element you can use:

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

Response based on: Scroll / Jump to id without jQuery