I have Jquery code on my page that should make the page scroll to a few things but also make the page scroll to a particular div. For some reason, the scrolling is all over the place and it never scrolls to the actual div. Could this be a bug?
jQuery( document ).ready(function($) {
$(function(){
// when button 1 is clicked
$('.module1Btn').click(function(){
// scroll div with id #menuSlider to top of viewport
$('html, body').animate({scrollTop: $('#menuSlider').offset().top}, 'slow');
//set module1Btn as active and others inactive
$('.module1Btn').addClass('moduleBtnActive');
$('.module2Btn').removeClass('moduleBtnActive');
$('.module3Btn').removeClass('moduleBtnActive');
// and show module 1, hide others
$('.module1').addClass('showModule');
$('.module2').removeClass('showModule');
$('.module3').removeClass('showModule');
});
// when button 2 is clicked
$('.module2Btn').click(function(){
// scroll div with id #menuSlider to top of viewport
$('html, body').animate({scrollTop: $('#menuSlider').offset().top}, 'slow');
// set button 2 to active
$('.module2Btn').addClass('moduleBtnActive');
$('.module1Btn').removeClass('moduleBtnActive');
$('.module3Btn').removeClass('moduleBtnActive');
// and show module 2, hide others
$('.module2').addClass('showModule');
$('.module1').removeClass('showModule');
$('.module3').removeClass('showModule');
});
// when button 3 is clicked
$('.module3Btn').click(function(){
// scroll div with id #menuSlider to top of viewport
$('html, body').animate({scrollTop: $('#menuSlider').offset().top}, 'slow');
// set button 3 to active
$('.module3Btn').addClass('moduleBtnActive');
$('.module1Btn').removeClass('moduleBtnActive');
$('.module2Btn').removeClass('moduleBtnActive');
// and show module 3, hide others
$('.module3').addClass('showModule');
$('.module2').removeClass('showModule');
$('.module1').removeClass('showModule');
});
});
});