0

I am working on a document and I am trying to find the height of the page on different screen sizes. For example In the code below I am trying to make a button that when clicked takes you back to the top of the page, when you get to the bottom of the page it appears and when you get past a certain height it disappears. Can anyone help please.

window.addEventListener("scroll", scrollFunction);

            function scrollFunction() {
                if (window.pageYOffset > 300) {
                    backToTop.classList.toggle("show");
                }
            }
.back-to-top {
    width: 40px;
    height: 40px;
    background-color: green;
    position: fixed;
    bottom: 15%;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    box-shadow: 0 0 8px 3px darkgrey;
    cursor: pointer;
    opacity: 0;
    transform: scale(0, 0);

    transition: opacity 250ms ease-in, transform 250ms ease-in;
}

.show {
    opacity: 1;
    transform: scale(1, 1);
}
<div class="top-container">
                <div class="back-to-top">
                    <i class="fas fa-arrow-up"></i>
                </div>
            </div>
freeCoder
  • 39
  • 3
  • Does this answer your question? [Get div height with plain JavaScript](https://stackoverflow.com/questions/15615552/get-div-height-with-plain-javascript) – Beshambher Chaukhwan Mar 15 '21 at 02:29
  • The code and question doesn't seem to be very related to the title... Have you looked at [How to determine the screen height visible](https://stackoverflow.com/questions/1377782/javascript-how-to-determine-the-screen-height-visible-i-e-removing-the-space) – Jason Goemaat Mar 15 '21 at 02:39
  • have a look at this link... https://stackoverflow.com/a/8876069/1533592 – dale landry Mar 15 '21 at 02:40

1 Answers1

0

To get the page height you can use document.body.clientHeight. To check if the user arrived to the bottom of the page you can subtract the page height from the window height document.body.clientHeight - window.innerHeight

window.addEventListener("scroll", scrollFunction);
            
            function scrollFunction() {
                if (window.pageYOffset > (document.body.clientHeight - window.innerHeight)) {
                    var backToTop = document.querySelector('.back-to-top');
                    backToTop.classList.toggle("show");
                }
            }
.back-to-top {
    width: 40px;
    height: 40px;
    background-color: green;
    position: fixed;
    bottom: 15%;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    box-shadow: 0 0 8px 3px darkgrey;
    cursor: pointer;
    opacity: 0;
    transform: scale(0, 0);

    transition: opacity 250ms ease-in, transform 250ms ease-in;
}

.show {
    opacity: 1;
    transform: scale(1, 1);
}

.top-container{
height:1000px;}
<div class="top-container">
                <div class="back-to-top">
                    <i class="fas fa-arrow-up"></i>
                </div>
            </div>
xTrimy
  • 804
  • 9
  • 23