I have successfully implemented a #scrolldownbutton that scrolls to the first component. However, I am now attempting to modify it so that when the button is clicked, the page smoothly scrolls within the viewport and stops at the partially visible component at the bottom of the view port. The button should be positioned at the top of the visible component and the bottom of the viewport each time it is clicked.
Here is the current progress of my code. Any assistance would be greatly appreciated.
$(document).ready(function() {
$("#scrollmorebutton").on("click", function() {
console.log("scrollmorebutton was clicked");
//jquery smooth scroll code here
$('html, body').animate({
scrollTop: $("h2:contains('New Programs')").offset().top
}, 2000);
});
});