Greetings, community members! Despite my extensive research, I have been unable to find a solution to my query.
Just a heads up - I am a novice when it comes to javascript and jQuery.
My question pertains to incorporating two image buttons that, upon clicking, will scroll to the next paragraph or div element. The images in question are designed to resemble buttons.
To give you an idea of what I am aiming for, here is a snippet of the HTML code:
<div id="scrollbuttons">
<img id="prev" src="pics/prev.png"><a href="#"></a></img>
<img id="next" src="pics/next.png"><a href="#"></a></img>
</div>
Additionally:
<div id="work">
<p class="maintext">blabla</p>
</div>
<div id="gallery">
<p class="maintext">blabla</p>
</div>
<div id="project">
<p class="maintext">blabla</p>
</div>
<div id="finish">
<p class="maintext">blabla</p>
</div>
The goal is to enable smooth auto-scrolling so that upon clicking "next", the page smoothly transitions to the "work" section, followed by "gallery" and so forth. Similarly, pressing "prev" should smoothly move back to the previous point.
I am working with the latest version of jQuery and would prefer not to rely on plugins unless absolutely necessary.
I hope this detailed explanation provides enough context for assistance. Being new to JS, any guidance would be greatly appreciated. Thank you in advance.
Sincerely, Emil Nilsson