I am working with a django-qcm that has dynamic sections triggered by anchors and utilizes the scroll snap type property.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<style>
- styling omitted for brevity -
</style>
<section>
<div id="1" class="container">
- content removed for simplicity -
</div>
<div id="2" class="container">
- content removed for simplicity -
</div>
<div id="3" class="container">
- content removed for simplicity -
</div>
<div id="4" class="container">
- content removed for simplicity -
</div>
</section>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script>
function scrollToAnchor(ind){
const aTag = $("#"+ind);
$('body,section').animate({scrollTop: aTag.offset().top},'slow');
}
//scrollToAnchor('2');
var container_page = document.getElementsByClassName('container')
// JavaScript functionality simplified for clarity
</script>
</body>
</html>
The functionality behaves as expected up to the second anchor, where it stops working. The scrollToAnchor(3) method functions correctly when executed in the console. Adjustments were attempted to target different DOM parameters related to the container ID but without successful outcomes, only encountering errors.