How to run multiple functions in JQuery?

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.

Maybe you can do something like window.onscroll = function() {scrollFunction() ;stickyHeaderScroll()};. I belive the problem is that you are overriding the value of window.onscroll — Carsten Løvbo Andersen
– Carsten Løvbo Andersen, Commented Oct 11, 2022 at 6:00
Thanks @CarstenLøvboAndersen, I added that before the scroll button code however get the same result. — Wignu
– Wignu, Commented Oct 11, 2022 at 6:06

Ravi Makwana · Accepted Answer · 2022-10-11 06:27:59Z

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);

edited Oct 11, 2022 at 6:27

answered Oct 11, 2022 at 6:01

Ravi Makwana

2,9201 gold badge32 silver badges42 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Wignu Over a year ago

Thanks, I added the window.addEventlistener code to the top of the existing code but unfortunately no difference.

Wignu Over a year ago

Scratch that, removed the console.log code from both functions and it now works, cheers for that :).

Ravi Makwana Over a year ago

I found one bug just replace scrollTopBtn to mybutton

Collectives™ on Stack Overflow

How to run multiple functions in JQuery?

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related