Javascript滾動到頂部並滾動到底部

我嘗試創建一個JavaScript代碼來執行此操作：當用戶從文檔頂部向下滾動500px時，顯示按鈕以及當用戶單擊此按鈕時，到頁面的頂部。Javascript滾動到頂部並滾動到底部

當用戶不向下滾動，並且他在頁面的頂部時，它出現一個按鈕，當用戶點擊這個按鈕時轉到頁面的底部，他轉到頁面的底部，按鈕disapear

window.onscroll = function() { 
 
    scrollFunction() 
 
}; 
 
window.onscroll = function() { 
 
    downFunction() 
 
}; 
 

 
function scrollFunction() { 
 
    if (document.body.scrollTop > 500 || document.documentElement.scrollTop > 500) { 
 
    document.getElementById("myBtn").style.display = "block"; 
 
    } else { 
 
    document.getElementById("myBtn").style.display = "none"; 
 
    } 
 

 
} 
 

 
function downFunction() { 
 
    if (document.body.scrollTop = 0 || document.documentElement.scrollTop = 0) { 
 
    document.getElementById("myBottomBtn").style.display = "none"; 
 
    } else { 
 
    document.getElementById("myBottomBtn").style.display = "block"; 
 
    } 
 
} 
 
// When the user clicks on the button, scroll to the top of the document 
 
function topFunction() { 
 
    document.body.scrollTop = 0; // For Chrome, Safari and Opera 
 
    document.documentElement.scrollTop = 0; // For IE and Firefox 
 
} 
 

 
function bottomFunction() { 
 
    document.body.scrollTop = 100; // For Chrome, Safari and Opera 
 
    document.documentElement.scrollTop = 100; // For IE and Firefox 
 
}

#myBtn { 
 
    display: none; 
 
    position: fixed; 
 
    bottom: 20px; 
 
    right: 30px; 
 
    z-index: 99; 
 
    border: none; 
 
    outline: none; 
 
    background-color: #333; 
 
    color: white; 
 
    cursor: pointer; 
 
    padding: 10px; 
 
    border-radius: 10px; 
 
} 
 

 
#myBtn:hover { 
 
    background-color: #555; 
 
} 
 

 
#myBottomBtn { 
 
    display: block; 
 
    position: fixed; 
 
    right: 30px; 
 
    z-index: 99; 
 
    border: none; 
 
    outline: none; 
 
    background-color: #333; 
 
    color: white; 
 
    cursor: pointer; 
 
    padding: 10px; 
 
    border-radius: 10px; 
 
} 
 

 
#myBottomBtn:hover { 
 
    background-color: #555; 
 
}

的問題是在頂部的按鈕，當我點擊這個按鈕，它沒有去底部，當我把它的滾動仍出現

但按鈕屁股工作正常，當我滾動500像素的按鈕出現，當我點擊這個按鈕我去頂部

你能幫我解決第一個按鈕的問題嗎？做我想做的事

來源

2017-07-21 mohamad mohamad

你在同一個事件window.onscroll上寫了兩次，只有downFunction（）會起作用。您應該使用object.addEventListener("scroll", myScript);EventListener Doc。

window.addEventListener("scroll", function() { 
 
    scrollFunction(); 
 
    downFunction(); 
 
});; 
 

 
function scrollFunction() { 
 
    console.log(document.documentElement.scrollTop); 
 
    if (window.scrollY > 200) { 
 
    document.getElementById("myBtn").style.display = "block"; 
 
    } else { 
 
    document.getElementById("myBtn").style.display = "none"; 
 
    } 
 

 
} 
 

 
function downFunction() { 
 
    if (window.scrollY === 0) { 
 
    document.getElementById("myBottomBtn").style.display = "none"; 
 
    } else { 
 
    document.getElementById("myBottomBtn").style.display = "block"; 
 
    } 
 
} 
 
// When the user clicks on the button, scroll to the top of the document 
 
function topFunction() { 
 
    document.body.scrollTop = 0; // For Chrome, Safari and Opera 
 
    document.documentElement.scrollTop = 0; // For IE and Firefox 
 
} 
 

 
function bottomFunction() { 
 
    window.scrollY = 220; // For Chrome, Safari and Opera 
 
    document.documentElement.scrollTop = 220; // For IE and Firefox 
 
}

<input type="button" value="bottom" onclick="bottomFunction()" /> 
 
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>&nbsp; 
 
<input type="button" id="myBtn" value="myBtn" /> 
 
<input type="button" id="myBottomBtn" value="myBottomBtn" /> 
 
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>&nbsp; 
 
<input type="button" value="top" onclick="topFunction()" />

來源

2017-07-21 07:40:30 Cylexx

你可以給我更多的細節與例子 –

謝謝它的工作:) –

Javascript滾動到頂部並滾動到底部

回答

相關問題