Currently, I am working on designing a simple one-page website featuring a fixed menu that smoothly scrolls to specific sections on the page upon clicking the menu items.
However, I have encountered an issue where the scrolling works perfectly only when the page is scrolled to the very top. If I first click on one menu item and then proceed to click another, the page will scroll to seemingly random positions instead of the intended anchors.
This problem arises specifically when using a jQuery script for smooth scrolling. Removing the script resolves the anchor linking issue but eliminates the smooth scrolling effect that I desire.
To better illustrate this problem, I have created a JSFiddle demonstration along with a brief video.
$(document).ready(function () {
$('a[href^="#"]').on('click',function (e) {
e.preventDefault();
var target = this.hash;
var $target = $(target);
$('html, body').stop().animate({
'scrollTop': $target.offset().top - 50
}, 900, 'swing', function () {
window.location.hash = target;
});
});
});