On a website I am creating for a school project, I have a large catalogue of products on a page. I have internal links that jump to certain parts of the page to make it easier to navigate. right now the link jumps me instantly to the part of the website which is fine but I would much rather have it scroll down at a reasonably fast rate to make it less disorientating and look better
the code I have has the different parts of the catalogue into sections with id tag that have a name appropriate to the context of the website the anchor tags jump to that part of the website. the code below is what I have without context for ease of understanding
<section class="StringNav">
<a href="#ID1"><p class = "bodyText">Jump to ID 1</p></a>
<a href="#ID2"><p class = "bodyText">Jump to ID 2</p></a>
<a href="#ID3"><p class = "bodyText">Jump to ID 3</p></a>
<a href="#ID4"><p class = "bodyText">Jump to ID 4</p></a>
<a href="#ID5"><p class = "bodyText">Jump to ID 5</p></a>
<a href="#ID6"><p class = "bodyText">Jump to ID 6</p></a>
<a href="#ID7"><p class = "bodyText">Jump to ID 7</p></a>
<p class = "bodyText"></p> <!-- this is just to add a breaker line -->
</section>
The code below is what I have to each section
<h2 id = "ID1" class="StringSeperation">This is ID 1</h2>
I believe that it is likely that I will need to use javascript to make this work which I am still very new to and since this website will never see the light of day you are welcome to make it as basic and simple as you need to. but I also want the ability to adjust the rate at which it scrolls