My goal is to create a smooth scrolling website that scrolls vertically using jQuery. I found a helpful tutorial called Smooth Scrolling Website and have been following it closely to build my site.
However, I'm facing an issue with a fixed header - the scrolling works fine, but the content appears halfway down the relevant div instead of just below the fixed header where I want it to be.
I've tried adding an offset to scrollTop, but it caused chaos on the page with elements appearing above the fixed header. It turned into somewhat of a mess. Any insight or tips would be greatly appreciated.
$(function() {
$('ul.menu a').bind('click',function(event){
var $anchor = $(this);
$('html, body').stop().animate({
scrollTop: $($anchor.attr('href')).offset().top
}, 1500,'easeInOutExpo');
/*
if you don't want to use the easing effects:
$('html, body').stop().animate({
scrollTop: $($anchor.attr('href')).offset().top
}, 1000);
*/
event.preventDefault();
});
});
I came across some code on StackOverflow (
+ $('.fixedheader').outerHeight()scrollTop: $($anchor.attr('href')).offset().top