Pointing to table results in HTML5. (in same page)

Question

In a HTML page, there are around 30 search fields. After entering the inputs and click on search button , the page reloads with search results table

How can I point to results table on load. Currently I have to scroll down to see results. But expecting is it should display in view(automatically scroll down to results table)

HTML :

<input type="submit" value="Search" id="search" class="btn btn-primary" th:onclick="'javascript:searchActionURL(\'' + @{/searchTables/search} +  '\')'" /> 

<div id="searchResults">
    <div id="resultstab" th:if="!${#lists.isEmpty(resultList)}">
         // Table
    </div>
</div>

Answer 1

The browser will automatically scroll to any element by adding a # and the id of that element. As your table has an id (or it is inside a div with the id "resultstab"), you just need to add that id to the action in the form tag. For example:

<form method="..." action="mypage.html#resultstab">

Now when the form is submitted, the browser will scroll automatically to wherever the #resultstab element is in the page.