I have just completed a website project for a Udemy course, following all the instructions provided. However, I am facing an issue with the functionality of two buttons on my site. I want these buttons to scroll to specific sections when clicked. The "I'm Hungry" button should lead to the "Plans" section, while the "Show me More" button should take users to the "Features" section.
You can access the website through this link: . Feel free to view the source code or inspect using developer tools.
Here is a snippet of the HTML code:
<div class="hero-text-box">
<h1> Goodbye junk food. <br> Hello super healthy meals. </h1>
<a class="btn btn-full js--scroll-to-plans" href="#" > I'm hungry </a>
<a class="btn btn-ghost js--scroll-to-start" href="#"> Show me more </a>
</div>
...
<section class="section-features js--section-features" id="features">
<div class="row">
...
</div>
</section>And here are some relevant CSS parts:
/* BUTTONS */
.btn:link,
.btn:visited,
input[type=submit]{
...
}
...
.hero-text-box {
...
}
.section-plans {
...
}Lastly, the Javascript code responsible for scrolling functionalities:
$(document).ready(function() {
// Sticky navigation and scroll buttons logic
...
// Other animations on scroll and mobile menu functionality
...
});
// Additional script for smooth scrolling
...