在特定高度时出现滚动顶部按钮

Question

here's my issue:

My button ( button used to scroll to the top of the page ) must appear when my window is at the top of my "nav", here is the 2 method i tried, please tell me what i do wrong:

function retourTop(){
    let boutonScroll = document.querySelector("#btnScroll");
    let navbar = document.querySelector("header nav");
    
    
    
    if(document.body.scrollTop < navbar.getBoundingClientRect.y){
        boutonScroll.style.display = "block";
    }else{
        boutonScroll.style.display = "none";
    }

and the second:

function retourTop(){
    let boutonScroll = document.querySelector("#btnScroll");
    let navbar = document.querySelector("header nav");
    
    if(document.body.scrollTop < document.querySelector("header nav").getBoundingClientRect.y){
        boutonScroll.style.display = "block";
    }else{
        boutonScroll.style.display = "none";
    }
}

Answer 1

I used element.offsetTop and window.scrollY (run code snippet)

 let button = document.querySelector("button"); let nav = document.querySelector("nav"); function toggle(display) { button.style.display = display; } window.addEventListener('scroll',function(e) { let navHeight = nav.offsetTop; let scrollHeight = window.scrollY; scrollHeight >= navHeight? toggle("block"): toggle("none"); }); function back() { window.scrollTo(0,0); }

 header { height: 200px; display: flex; background: lightgray; flex-direction: column; justify-content: flex-end; } nav { width: 100%; height: 50px; background: gray; display: flex; flex-direction: column; justify-content: center; text-align: center; } div { height: 200vh; width: 100%; } button { position: fixed; bottom: 0; display: none; }

 <header> <nav>Scroll Down</nav> </header> <div></div> <button onclick="back()">Back to Top</button>