Scroll to top button visible only on desktop (no mobile)-CodePudding

I made a scroll to top button that appears when the user scrolls down 25px from the top of the document (otherwise it's not visible) thanks to JavaScript following a tutorial because I still don't know anything about this programming language.

However, I would like it to be visible only on desktop websites and not also on mobile.

I tried using media queries but they don't work since JavaScript has control over the visibility of the button. What function can I integrate to manage everything with JS?

Here is the code I'm using.

let myButton = document.getElementById("to-top-container");

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


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

#to-top-container {
  position: fixed;
  bottom: 30px;
  right: 3px;
}

.to-top-button {
  background-color: #263238;
  min-height: 40px;
  min-width: 40px;
  border-radius: 20px;
  text-decoration: none;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 2px 4px 5px rgb(0 0 0 / 30%);
  /* animation: Up 2.3s infinite; */
}

#to-top-container .lni {
  font-size: 14px;
  font-weight: 900;
  color: white;
}

<div id="to-top-container">
  <a href="#body-container" title="Torna su" >
    <i ></i>
  </a>
</div>

CodePudding user response：

There is a JS way to detect if a media query is matched: this is done by using window.matchMedia(). Then it is a matter of adding the appropriate media query to matchMedia() function, and then checking the .matches property in your if block:

let myButton = document.getElementById("to-top-container");

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


function scrollFunction() {
  const matchesMediaQuery = window.matchMedia('(min-width: 600px)');
  if (matchesMediaQuery.matches && (document.body.scrollTop > 25 || document.documentElement.scrollTop > 25)) {
    myButton.style.display = "block";
  } else {
    myButton.style.display = "none";
  }
}

scrollFunction();

#to-top-container {
  position: fixed;
  bottom: 30px;
  right: 3px;
}

.to-top-button {
  background-color: #263238;
  min-height: 40px;
  min-width: 40px;
  border-radius: 20px;
  text-decoration: none;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 2px 4px 5px rgb(0 0 0 / 30%);
  /* animation: Up 2.3s infinite; */
}

#to-top-container .lni {
  font-size: 14px;
  font-weight: 900;
  color: white;
}

<div id="to-top-container">
  <a href="#body-container" title="Torna su" >
    <i ></i>
  </a>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>

CodePudding user response：

Just Add this css in your css file or if you are using bootstrap then add bootstrap media query to disable display in mobile

@media only screen and (max-width: 600px) {
      #to-top-container {
        display: none;
      }
    }

CodePudding user response：

You don't need javaScript to do it, you should have used the "a" tag to jump to other pages. But the "a" tag can also jump to an element on the same page.

As defined in the HTML specification, you can use href="#top" or href="#" to link to the top of the current page.

The @media query is set to max-width: 600px - adjust the max-width to fit your needs.

html {
  scroll-behavior:smooth;
}
body {
  position: relative;
}
.section {
  height: 100vh;
  background: #dedede;
  margin-bottom: 20px;
  font-size: 100px;
}

.scroll-container {
  position: absolute;
  top: 0;
  right:0;
  height: 100%;
}

.scroll-container:before {
  content: '';
  display: block;
  height: 100vh;
  pointer-events: none;
}

.scroll-container a {
  position: sticky;
  top: 88vh;
  cursor: pointer;
  font-size: 20px;
}

@media (max-width: 600px) {
  .scroll-container a {
    display: none;
  }
}

<div >Section 1</div>
<div >Section 2</div>
<div >Section 3</div>
<div >
  <a href="#top">To Top</a>
</div>