html, body {
height: 100%;
min-height: 100%;
position: relative;
}
#home {
height: 100%;
background: url("../img/test.jpg") center no-repeat;
background-size: cover;
}
I've incorporated the Smooth Scroll JavaScript by CSS-Tricks
$(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
}, 1000);
return false;
}
}
});
});
On my webpage, the initial section displays a full-page image. To achieve this, I set the html and body heights to 100%, which also applies to #home. However, I encountered an issue where the Smooth Scroll effect stopped working when the html and body have a height of 100%. Removing the height property from the html and body elements allowed the Smooth Scroll effect to function properly.
Has anyone else faced a similar problem?