Here's the jQuery Code
You'll need these scripts in the <head> of your html page
<script type="text/javascript" src="https://www.freestyleacademy.rocks/jquery/minified.js"></script>
<script type="text/javascript" src="https://www.freestyleacademy.rocks/jquery/easing.js"></script>
<script type="text/javascript" src="https://www.freestyleacademy.rocks/jquery/easing.compatibility.js"></script>
Here's the script that make the whole thing function properly
var btnClicked, scrollTime, easingMethod;
//set initial values for variables
topAdjustment = 50;//how many pixels do you want the scroll to stop below the top of the browser
scrollTime = 1000;//how much time in milliseconds 1000ms=1s do you want the scroll to occur
easingMethod = "easeInOutQuint";//type of easing for the scroll effect
//actions when buttons are clicked
$(".btn").click(function () {
var btnClicked=$(this).attr("ID");
var sectionNumber=btnClicked.substring(3,5);//extracts the button number, i.e. btn1 becomes 1
var targetSection = "#section"+sectionNumber;
if(sectionNumber!=0){//since there's no section0, this execute for sectionNumbers not equal to 0
$(targetSection).goTo();//calls on function goTo below to scroll to targetSection
} else {//in the case that the sectionNumber is equal to 0
$("body").goTo();//calls on function goTo below to scroll to <body> tag y position
}
});
(function($) {//defining a function
$.fn.goTo = function() {
$("html, body").stop().animate({//stop is for quick clicking of buttons to stop current action
"scrollTop": $(this).offset().top//the executes the scrolling action to new y position
}, scrollTime, easingMethod);
return this;
}
})(jQuery);
//Change background image code
var section1H, section2H, section3H, section4H, section5H, changeBGAdjustment;
changeBGAdjustment = 100;
//gather info about where the top of each section starts relative to the top of the screen when the page loads
section1H = $("#section1").offset().top - changeBGAdjustment;
section2H = $("#section2").offset().top - changeBGAdjustment;
section3H = $("#section3").offset().top - changeBGAdjustment;
section4H = $("#section4").offset().top - changeBGAdjustment;
section5H = $("#section5").offset().top - changeBGAdjustment;
//create an array of image locations for future use down below
var bgImages = [];
bgImages[0] = "url(/galleries/backgrounds/metal1.jpg)";
bgImages[1] = "url(/galleries/backgrounds/metal2.jpg)";
bgImages[2] = "url(/galleries/backgrounds/metal3.jpg)";
bgImages[3] = "url(/galleries/backgrounds/metal4.jpg)";
bgImages[4] = "url(/galleries/backgrounds/metal5.jpg)";
//preload background images so that there is no white flash when background images change
//due to delay in downloading new background image
$('<img src="/galleries/backgrounds/metal1.jpg"/>');
$('<img src="/galleries/backgrounds/metal2.jpg"/>');
$('<img src="/galleries/backgrounds/metal3.jpg"/>');
$('<img src="/galleries/backgrounds/metal4.jpg"/>');
$('<img src="/galleries/backgrounds/metal5.jpg"/>');
//now create a div that
$("body").prepend('<div id="bgHolder"></div>');
$("#bgHolder").css({
"width":"100%",
"height":$("html").innerHeight(),
"background-image":bgImages[0],
"background-position":"center top",
"background-repeat":"repeat-y",
"position":"fixed",
"top":"0",
"left":"0",
"z-index":"0"
});
$(window).scroll(function(){
var yPos = 0, bgURL;
yPos = $(window).scrollTop();
switch (true) {
case (yPos < section2H):
bgURL = bgImages[0];
break;
case (yPos < section3H):
bgURL = bgImages[1];
break;
case (yPos < section4H):
bgURL = bgImages[2];
break;
case (yPos < section5H):
bgURL = bgImages[3];
break;
case (yPos >= section5H):
bgURL = bgImages[4];
break;
}
$("#bgHolder").css({
"background-image":bgURL
});
});