在特定高度時出現滾動頂部按鈕

Question

這是我的問題：

當我的 window 位於我的“導航”頂部時，我的按鈕（用於滾動到頁面頂部的按鈕）必須出現，這是我嘗試的 2 種方法，請告訴我我做錯了什么：

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";
    }

第二個：

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

我使用了 element.offsetTop 和 window.scrollY （運行代碼片段）

 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>