I am currently working on a unique feature where users can click on the left navigation link and the right section will automatically scroll to the corresponding box.
For instance, if a user clicks on the second link in the navigation, the right-side div will smoothly scroll to reveal the contents of the second box within that div.
Below is the HTML structure for this feature:
<div id='nav'>
<ul>
<li><a id='link1' class='link' href='#'>test 1</a><li>
<li><a id='link2' href='#'>test 2</a><li>
...
<li><a id='link16' href='#'>test 16</a><li>
</ul>
</div>
<div id='items'>
<div id='link1-test' class='box'>
test 1
</div>
<div id='link2-test' class='box'>
test 2
</div>
...
<div id='link16-test' class='box'>
test 16
</div>
</div>
This is the JavaScript code used for achieving this functionality:
$('#nav a').on('click', function(){
var id=$(this).attr('id')
alert(id)
$('#items').animate({
scrollTop: $('#'+id+'-test').offset().top
}, 700);
})
You can check out a live example of this code here.
I have encountered an issue with the positioning of the boxes inside the right div, as it keeps changing dynamically. I would appreciate any help or suggestions on how to tackle this problem effectively. Thank you in advance!