I am new to Javascript but have the following code taken from W3 How to Scroll Back to Top Button: https://www.w3schools.com/howto/howto_js_scroll_to_top.asp
I'd like to remove the button on a min-width media query (for example min-width:600px) - is that possible? Sorry, I am sure this is really basic, thanks.
Code
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>Use window.innerWidth property.
Something like,
window.onscroll = function() {
if (window.innerWidth <= 600) {
scrollFunction();
}
};
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;
}
Here, This should work! Basically, you can use window.matchMedia("(max-width: 600px)").matches to check screen size. Then you can add js code to make button display none.