How to run multiple functions in JQuery? - php

Question

Have two functions in my index.php file, they work fine, but will only execute the last one. They work fine when one is commented out or the order is swapped, my question is how can I get them to both run if this is possible.
// ************************* Scroll Up Button *************************
// Get the button
var mybutton = document.getElementById("scrollTopBtn");
// When the user scrolls down 20px from the top of the document, show the button
window.onscroll = function() {scrollFunction()
console.log('Scroll To Top Button');
};
function scrollFunction() {
if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
scrollTopBtn.style.display = "block";
} else {
scrollTopBtn.style.display = "none";
}
}
// When the user clicks on the button, scroll to the top of the document
function topFunction() {
document.body.scrollTop = 0;
document.documentElement.scrollTop = 0;
}
// ********************** Sticky navbar **********************************
window.onscroll = function() {stickyHeaderScroll()};
var header = document.getElementById("navBack");
var sticky = header.offsetTop;
function stickyHeaderScroll() {
if (window.pageYOffset > sticky) {
header.classList.add("sticky");
} else {
header.classList.remove("sticky");
}
}
For the example above the navbar will remain sticky but the scroll to top button won't appear, if I swap the code then scroll button will appear and work but navbar won't remain sticky. I've tried adding the sticky navbar code into the navbar.php, but still get the same problem.
I know I'm missing something really obvious here, but the other answers I've looked at don't seem to work.

Answer 1

You can add both function at once
// ************************* Scroll Up Button *************************
// Get the button
var mybutton = document.getElementById("scrollTopBtn");
function scrollFunction() {
if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
mybutton.style.display = "block"; // here was used worng object
} else {
mybutton.style.display = "none";
}
}
// When the user clicks on the button, scroll to the top of the document
function topFunction() {
document.body.scrollTop = 0;
document.documentElement.scrollTop = 0;
}
// ********************** Sticky navbar **********************************
var header = document.getElementById("navBack");
var sticky = header.offsetTop;
function stickyHeaderScroll() {
if (window.pageYOffset > sticky) {
header.classList.add("sticky");
} else {
header.classList.remove("sticky");
}
}
// When the user scrolls down 20px from the top of the document, show the button
window.onscroll = function() {
if(typeof scrollFunction === "function") {
scrollFunction();
}
if(typeof stickyHeaderScroll=== "function") {
stickyHeaderScroll();
}
console.log('Scroll To Top Button');
};
or use window.addEventListener('scroll', functionName)
window.addEventListener('scroll', scrollFunction);
window.addEventListener('scroll', stickyHeaderScroll);