Breaking News: Grepper is joining You.com. Read the official announcement!

javascript - BACK TO TOP 3/3

Mojca Taler s.p. answered on January 7, 2024 Popularity 1/10 Helpfulness 1/10

answer javascript - BACK TO TOP 3/3

javascript - BACK TO TOP 3/3

Comment

document.addEventListener('DOMContentLoaded', function() {
    var backToTopBtn = document.getElementById('backToTopBtn');
    var footer = document.getElementById('yourFooterId'); // Replace 'yourFooterId' with the actual ID of your footer element

    window.onscroll = function() {
        var scrollPosition = window.scrollY + window.innerHeight;
        var footerPosition = footer.offsetTop;

        if (scrollPosition > footerPosition) {
            backToTopBtn.style.bottom = (scrollPosition - footerPosition + 20) + 'px';
        } else {
            backToTopBtn.style.bottom = '20px';
        }

        if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
            backToTopBtn.style.display = 'block';
        } else {
            backToTopBtn.style.display = 'none';
        }
    };

    backToTopBtn.onclick = function() {
        document.body.scrollTop = 0;
        document.documentElement.scrollTop = 0;
    };
});

Popularity 1/10 Helpfulness 1/10 Language css

Source: chat.openai.com

Tags: back css javascript

Link to this answer
Share Copy Link

Contributed on Jan 07 2024

Mojca Taler s.p.

0 Answers Avg Quality 2/10

Continue with Google

By continuing, I agree that I have read and agree to Greppers's Terms of Service and Privacy Policy.

javascript - BACK TO TOP 3/3

Contents

More Related Answers

javascript - BACK TO TOP 3/3

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.