我是 Javascript 新手，但從 W3 How to Scroll Back to Top Button 獲取以下代碼：https ://www.w3schools.com/howto/howto_js_scroll_to_top.asp
我想洗掉最小寬度媒體查詢上的按鈕（例如 min-width:600px） - 這可能嗎？抱歉，我確定這是非常基本的，謝謝。
代碼
var mybutton = document.getElementById("top-button");
// When the user scrolls down 20px from the top of the document, show the button
window.onscroll = function() {
scrollFunction()
};
function scrollFunction() {
if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
mybutton.style.display = "block";
} else {
mybutton.style.display = "none";
}
}
// When the user clicks on the button, scroll to the top of the document
function topFunction() {
document.body.scrollTop = 0;
document.documentElement.scrollTop = 0;
}#top-button {
display: none;
position: fixed;
bottom: 0.75rem;
right: 0.75rem;
z-index: 99;
background-color: #1A936F;
color: #f3e9d2;
cursor: pointer;
padding: 0.75rem;
border-radius: 0.5rem;
font-size: 1.1rem;
}<button onclick="topFunction()" id="top-button" title="Go to top">Top</button>uj5u.com熱心網友回復：
使用window.innerWidth財產。
就像是，
window.onscroll = function() {
if (window.innerWidth <= 600) {
scrollFunction();
}
};
示例：https ://jsfiddle.net/codeandcloud/sezk0j74/
uj5u.com熱心網友回復：
var mybutton = document.getElementById("top-button");
var x = window.matchMedia("(max-width: 600px)");
// When the user scrolls down 20px from the top of the document, show the button
window.onscroll = function() {
scrollFunction()
};
function scrollFunction() {
if (x.matches) {
mybutton.style.display = "none";
}
else if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20){
mybutton.style.display = "block";
} else {
mybutton.style.display = "none";
}
}
// When the user clicks on the button, scroll to the top of the document
function topFunction() {
document.body.scrollTop = 0;
document.documentElement.scrollTop = 0;
}
在這里，這應該作業！基本上，您可以使用 window.matchMedia("(max-width: 600px)").matches 來檢查螢屏大小。然后你可以添加js代碼使按鈕不顯示。
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/412987.html
標籤：