Pointing to the result of a table in HTML5. (on the same page)
There are about 30 search fields on the HTML page. After entering the inputs and clicking the search button, the page is reloaded with the search results table
How can I specify the load results table. I currently need to scroll down the page to see the results. But expect it to show up in view (auto 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>
source to share
The browser will automatically scroll any element, adding the #
ID of that element as well. Since your table has an id (or is inside 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 that the form is submitted, the browser will automatically scroll to where the element #resultstab
is on the page.
source to share