I have implemented a script that allows for smooth scrolling to different sections within a webpage when clicking on links in the top navigation menu. In the HTML, I've assigned IDs to each section (section1, section2, section3, etc.) and linked these IDs to the respective hrefs in the navigation menu. For example,
<a href="#about">About us</a>#about when clicked.
The scrolling effect works well, but there is an issue due to my fixed header - when scrolling to a section, the top part of the section gets cropped by the overlaying header. You can view a live preview here: www.loaistudio.com. How can I address this problem? Additionally, I want to enhance the JavaScript code below to add a class of 'Active' to the link in the navigation menu corresponding to the section currently being viewed.
$(document).ready(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) {
$('html,body').animate({
scrollTop: target.offset().top
}, 700);
return false;
}
}
});
});