As a student studying software development, I am currently working on a web development project for my class. Utilizing Bootstrap, I have implemented a navbar-fixed-top and structured the body as a table-striped table with each row containing a
<a href="#section">Section</a>The issue I encountered is that the list is quite lengthy, so I integrated jQuery UI autocomplete along with a button. This allows users to click the button (assisted by autocomplete) in order to be redirected to the corresponding #section row.
While the autocomplete and button functionalities are functioning properly, upon redirection, the desired row ends up behind the navbar.
After researching this problem, I discovered a quick fix using CSS:
padding-top: 65px;However, I am reluctant to implement this solution as it would result in an excessively long table.
If my explanation was unclear, please refer to the sample code below:
Example HTML
<script>
// Redirect function
(function ($) {
$.fn.goTo = function () {
$('html, body').animate({
scrollTop: $(this).offset().top + 'px'
}, 'fast');
return this; // for chaining...
}
})(jQuery);
</script>
<button class="btn btn-info" onclick="$('#' + document.getElementById('tags').value).goTo();">>Search</button>
<div class="table-responsive">
<table class="table table-striped table-hover table-condensed">
<thead>
<tr>
<th>Col 1</th>
<th>Col 2</th>
<th>Col 3</th>
</tr>
</thead>
<tbody>
<tr id="Section1">
<th>Col 1</th>
<th>Col 2</th>
<th>Col 3</th>
</tr>
<tr id="Section2">
<th>Col 1</th>
<th>Col 2</th>
<th>Col 3</th>
</tr>
<!-- code continues similarly for nearly 1000 rows -->
</tbody>
</table>
</div>