My scrolling function has three variations, each triggered by a different click event. Interestingly, the top two work perfectly, smoothly scrolling to the specified element ID. However, the third one seems to skip the smooth scroll and jumps straight to the element without an animation.
$('#scroll-down').click(function scrollDownProfile(){
$('html, body').animate({
scrollTop: $('#profile').offset().top
}, 500);
});
$('#scroll-down-bp').click(function scrollDownBP(){
$('html, body').animate({
scrollTop: $('#bp').offset().top
}, 500);
});
$('#scroll-down-software').click(function scrollDownProjects(){
$('html, body').animate({
scrollTop: $('#software').offset().top
}, 500);
});
I suspect that the issue lies in the HTML structure as all three functions are essentially identical in code. I have provided snippets from each page's HTML below for reference.
<a id="scroll-down" href="#profile" class="scroll-down">
<span></span>
</a>
</header>
<nav id="navigation-bar" class="navbar navbar-default" role="navigation">
[...]
<div id="profile" class="background_white">
<div class="container">
<h2>Profile</h2>
</div>
</div>
<a id="scroll-down-bp" href="#bp" class="scroll-down">
<span></span>
</a>
</header>
<nav id="navigation-bar" class="navbar navbar-default" role="navigation">
[...]
<div id="bp" class="background_white">
<div class="container container-about-me">
<div id="bp-icam logo">
<h2>BP-ICAM</h2>
</div>
</div>
</div>
<a id="scroll-down-software" href="#software" class="scroll-down">
<span></span>
</a>
</header>
<div id="software" class="background_white">
<div class="container container-about-me">
<h2 style="color: #2A293E;">Projects</h2>
</div>
</div>
The primary distinction between the two working configurations and the problematic one seems to be the presence of the nav element between the trigger and target elements. Although it may seem unrelated, I can't help but wonder if this structural variance is causing the malfunction.