Within a series of nested div containers, I have one with the CSS property overflow:hidden. My goal is to smoothly scroll to internal links within this specific div using jQuery. The snippet of code below has worked successfully in previous projects:
$(function() {
$('a[href*=#]:not([href=#])').click(function() {
if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
if (target.length) {
$('#cardb').animate({
scrollTop: target.offset(
).top
}, 0500);
return false;
}
}
});
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="slide4" class="slide">
<div id="carda">
<p>CARD A</p>
</div>
<div id="cardb">
<div id="cardb-1">
<p>CARD B 1</p>
</div>
<div id="cardb-2">
<p>CARD B 2</p>
</div>
<div id="cardb-3">
<p>CARD B 3</p>
</div>
<div id="cardb-4">
<p>CARD B 4</p>
</div>
<div id="linkcontainer">
<a href="#cardb-1"><div class="linkcircle"></div></a>
<a href="#cardb-2"><div class="linkcircle"></div></a>
<a href="#cardb-3"><div class="linkcircle"></div></a>
<a href="#cardb-4"><div class="linkcircle"></div></a>
</div>
</div>
</div>I'm facing unexpected results where the links do not consistently scroll to the correct target, and clicking on the same link twice still triggers scrolling (e.g. when at #cardb-1 and clicking its link again, the div scrolls elsewhere). Even after researching extensively as a newcomer to jQuery, I've seen no improvement. It's possible that the issue lies in my CSS implementation, but I can't pinpoint where I may have made an error. When I disable the jQuery, the links appear correctly at their expected positions.