I am in the process of creating a website for a small organization. The website is being constructed using bootstrap 4, and there is a navbar that connects to various flex-containers. I want these connections to smoothly scroll to their respective elements.
To achieve this functionality, I am utilizing the following jQuery code:
// Smooth scrolling to ID from navbar items
$(".navbar a").click(function () {
$("body,html").animate({
scrollTop: $("#" + $(this).data('value')).offset().top - $('.navbar').height() - 10
}, 1000)
});
This script is designed to scroll to a position corresponding to the top of the flex-container minus the height of the navbar with a buffer zone of 10 pixels.
In the same .js file, I also have the following snippet which incorporates the ScrollReveal package to fade in text/images as the user scrolls through:
// Fade in text on scroll
window.sr = ScrollReveal({ reset: true });
sr.reveal('.reveal', { opacity: 0.1, duration:600 });
On occasion, when clicking a nav-link, it may initially overscroll but then correctly scroll to the intended position on a subsequent click. Upon removing the ScrollReveal call, the scrolling behavior seems to work as expected. Is there an issue with either of these code snippets?