Hello, I've added jQuery smooth scrolling to my website but it doesn't seem to be working correctly. Instead of scrolling smoothly, the site now scrolls horizontally to the right. I have already tried using smooth-behaviour but that did not solve the issue.
Here is the JavaScript code:
$(document).ready(function () {
// Add smooth scrolling to all links
$("a").on("click", function (event) {
// Make sure this.hash has a value before overriding default behavior
if (this.hash !== "") {
// Prevent default anchor click behavior
event.preventDefault();
// Store hash
var hash = this.hash;
// Using jQuery's animate() method to add smooth page scroll
// The optional number (800) specifies the number of milliseconds it takes to scroll to the specified area
$("html, body").animate(
{
scrollTop: $(hash).offset().top,
},
800,
function () {
// Add hash (#) to URL when done scrolling (default click behavior)
window.location.hash = hash;
}
);
} // End if
});
});
And here is the HTML code:
<img src="icon/logo.svg" alt="logo" class="logo">
<div class="navbar">
<a href="#home" class="nav-a">Home</a>
<a href="#about" class="nav-a">About</a>
<a href="#works" class="nav-a">Projects</a>
<a href="#documentation" class="nav-a">Documentation</a>
</div>