I am currently working on implementing smooth scrolling into my website using JavaScript. However, I have run into a problem with CSS property scroll-margin-top causing a sudden jump at the end. The CSS I am using for scroll margins looks like this:
class or div {
scroll-margin-top: 6rem;/*adjust size as needed*/
}
In addition to the CSS, I also have a JavaScript function set up for smooth scrolling. The issue arises when scrolling to specific sections, there is a noticeable jump right at the end of the scroll.
Below is the snippet of the JavaScript code in question:
var ssSmoothScroll = function () {
$('a[href^="#"], area[href^="#"]').on('click', function (e) {
var target = $($(this).attr('href'));
if (target.length) {
e.preventDefault();
$('html, body').stop().animate({
scrollTop: target.offset().top
}, cfg.scrollDuration, 'swing', function () {
window.location.hash = target.attr('id');
});
}
});
};
If you have any suggestions on how to resolve this issue and achieve a seamless smooth scrolling experience without the jarring jump at the end, please let me know.