I'm facing an issue with navigating between pages on my website. I have a list of pages and links to each page, and I am using the jQuery animate() function along with offset().top value to move to the desired page. However, after the first click, the position is not maintained and strange behavior occurs.
Here is a code snippet demonstrating the problem:
<html>
<head>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"
integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"
integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU=" crossorigin="anonymous"></script>
</head>
<body style="margin: 0px; padding: 0px; background-color: #AFAFAF;">
<div style="position: fixed; top: 0; left: 0; background-color: white; width: 100px; height: 120px; z-index: 99">
<a href="#" onclick="goToPage(1);">Go to page 1</a><br>
<a href="#" onclick="goToPage(2);">Go to page 2</a><br>
<a href="#" onclick="goToPage(3);">Go to page 3</a><br>
<a href="#" onclick="goToPage(4);">Go to page 4</a><br>
<a href="#" onclick="goToPage(5);">Go to page 5</a><br>
<a href="#" onclick="goToPage(6);">Go to page 6</a>
</div>
<div id="divContainer">
<div id="fixedContainer" style="position: fixed; top: 0; left: 0; right: 0; bottom: 0;">
<div id="pageContainer"
style="margin: 0 auto; height: 100%; max-width: 800px; position: relative; overflow-y: scroll; transition: all 0.3s ease-out 0s;">
<div id="page1" style="position: relative; height: 1200px; background-color: lightblue;">
</div>
<div id="page2" style="position: relative; height: 1200px; background-color: lightcoral;">
</div>
<div id="page3" style="position: relative; height: 1200px; background-color: lightcyan;">
</div>
<div id="page4" style="position: relative; height: 1200px; background-color: lightgoldenrodyellow;">
</div>
<div id="page5" style="position: relative; height: 1200px; background-color: lightgray;">
</div>
<div id="page6" style="position: relative; height: 1200px; background-color: lightgreen;">
</div>
</div>
</div>
</div>
<script>
function goToPage(elementId) {
$('#pageContainer').animate({
scrollTop: $('#page' + elementId).offset().top
}, 1200);
}
</script>
</body>
</html>The goal is to smoothly navigate between pages without altering the existing structure.