Is there a way to make a script element only activate under specific conditions?

Question

I have a HTML page that works on both desktop and mobile. It has a button that when pressed scrolls to the top of the page. But I only want it to appear when in desktop mode. It's hidden until you scroll down the page, and then becomes clickable.

This is my code:

index.html:

<html>
    <head>
    <title>Home</title>
    <link rel="icon" type="image/x-icon" href="./images/favicon.png">
    <link rel="stylesheet" media="screen and (min-width: 1294px)" href="main.css">
    <link rel="stylesheet" media="screen and (max-width: 1294px)" href="mobile.css">
    <link href="https://fonts.googleapis.com/css?family=Poppins" rel="stylesheet">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    </head>
    <body>
    <div class="header">
    <img src="./images/logo.png" title="Aeron" alt="logo" class="header-logo">  
    <div class="desktop-nav">
    <ul class="desktop-nav-links">
    <li><a href="index.html" class="hyperlink">Home</a></li>
    <li><a href="portfolio.html" class="hyperlink">Portfolio</a></li>
    <li><a href="contact.html" class="hyperlink">Contact</a></li>
    <li><a href="about.html" class="hyperlink">About Us</a></li>
    <li><a href="recipes.html" class="hyperlink">Recipes</a></li>
    <li><a href="progress.html" class="hyperlink">Progress</a></li>
    <li><a href="pcsetup.html" class="hyperlink">PC Setup Designer</a></li>
    <li><a href="gallery.html" class="hyperlink">Gallery</a></li>
    </ul>
    </div>
    <div class="mobile-nav">
    <span class="menu-button" onclick="openNav()">&#9776;</span>
    <div id="mobile-nav-panel" class="mobile-nav-panel">
    <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
    <ul class="mobile-nav-link-list">
    <li class="mobile-nav-link"><a href="index.html">Home</a></li>
    <hr>
    <li class="mobile-nav-link"><a href="portfolio.html">Portfolio</a></li>
    <hr>
    <li class="mobile-nav-link"><a href="contact.html">Contact</a></li>
    <hr>
    <li class="mobile-nav-link"><a href="about.html">About Us</a></li>
    <hr>
    <li class="mobile-nav-link"><a href="recipes.html">Recipes</a></li>
    <hr>
    <li class="mobile-nav-link"><a href="progress.html">Progress</a></li>
    <hr>
    <li class="mobile-nav-link"><a href="pcsetup.html">PC Setup Designer</a></li>
    <hr>
    <li class="mobile-nav-link"><a href="gallery.html">Gallery</a></li>
    <hr>
    <li class="mobile-nav-link"></li>
    </ul>
    </div>
    </div>
    </div>
    <h1 class="heading">Welcome to Aeron</h1>
    <div style="height:100%"></div>
    <footer>
    <img src="./images/logo.png" title="Aeron" alt="logo" class="footer-logo">
    <p class="copyright">Copyright &copy; 2022 Aeron Corporation</p>
    <div class="footer-links">
    <a href="about.html">About Us</a>
    <p>|</p>
    <a href="policy.html">Policy</a>
    <p>|</p>
    <a href="contact">Contact Us</a>
    </div>  
    </footer>
    <button onclick="topFunction()" id="return" title="Return To Top">^</button>
    <script>
        let mybutton = document.getElementById("return");
        window.onscroll = function() {scrollFunction()};
        function scrollFunction() {
        if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
        mybutton.style.display = "block";
        } else {
        mybutton.style.display = "none";
        }
        }
        function topFunction() {
        document.body.scrollTop = 0;
        }

          function openNav() {
            document.getElementById("mobile-nav-panel").style.width = "100%";
          }
          
          function closeNav() {
            document.getElementById("mobile-nav-panel").style.width = "0";
          }
          </script>
    </body>
</html>

main.css:

    @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500&display=swap');

* {
    box-sizing: border-box;
    scroll-behavior: smooth;
    font-family: 'Poppins', sans-serif;
}

body {
    background: linear-gradient( to right,#ff0000,#0000ff);
    margin: 0;
}

p {
    color:#ffffff;
    font-size:20px;
    padding: 10px;
}

.heading {
    margin: 20px;
    font-size: 50px;
    text-align: center;
    color: black;
}

a {
    text-decoration: none;
}

.favcolorcontainer {
    border: 2px solid black;
    border-radius: 4px;
    width: auto;
    padding: 5px;
    background: white;
    display: inline-flex;
}

.colorpicker {
    border:none;
    background: white;
    display: inline-flex;
}

.favcolor {
    font-family: verdana;
    margin-top: 3px;
}

.slideshow-container {
  display: block;
  width: 80%;
  position: relative;
  margin: 10px;
  margin-left: auto;
  margin-right: auto;
}

.mySlides {
  display: none;
}

.prev, .next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  margin-top: -22px;
  padding: 16px;
  color: white;
  font-weight: bold;
  font-size: 18px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
}

.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

.prev:hover, .next:hover {
  background-color: #a6a6a650;
}

.slide-name {
  color: #f2f2f2;
  font-size: 15px;
  padding: 8px 12px;
  position: absolute;
  bottom: 8px;
  width: 100%;
  text-align: center;
}

.slide-number {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}

.fade {
  animation-name: fade;
  animation-duration: 1.5s;
}

@keyframes fade {
  from {opacity: .4}
  to {opacity: 1}
}

.progress-bar {
    width: 100%;
    border: none;
    border-radius: 100px;
    background-color: #FFFFFF;
    padding: 3px;
}

.progress-tag {
    color: #DDDDDD;
    margin-left: 10px;
}

.fill-html {
    width: 75%;
    background-color: #FA3200;
    border-radius: 100px;
}


.fill-css {
    width: 60%;
    background-color: #0000C8;
    border-radius: 100px;
}

.fill-js {
    width: 10%;
    background-color: #C80000;
    border-radius: 100px;
}

.fill-php {
    width: 3%;
    background-color: #00C832;
    border-radius: 100px;
}

.fill-rwpd {
    width: 100%;
    background-color: #450099;
    border-radius: 100px;
}

#return {
  display: none;
  position: fixed;
  bottom: 30px;
  right: 35px;
  z-index: 99;
  border: none;
  outline: none;
  background-color: #0000d1;
  color: white;
  cursor: pointer;
  border-radius: 100px;
  font-size: 45px;
  width: 60px;
  height: 60px;
  
}

#return:hover {
  background-color: #0101bb;
}

.progress-container {
    padding: 10px;
}

.header-logo {
    margin: 10px;
    float: left;
    width: 150px;
}

.header {
    background-color: #303030;
    overflow: hidden;
    width: 100%;
}

.desktop-nav-links {
    float: right;
    margin-right: 20px;
}

.desktop-nav-links a {
    margin: 20px 25px 0;
    padding: 0 0 20px;
    display: block;
    color: white;
}

.desktop-nav-links a:hover {
    color: #b4b4b4;
    transition: 0.2s all ease;
}

.desktop-nav-links li {
    float: left;
    list-style: none;
}

.menu-button {
    display: none;
}

.copyright {
    color: #b4b4b4;
    font-size: 15px;

}
  
footer {
    background: #303030;
    padding: 25px 0;
    text-align: center;
    bottom: 0;
    width: 100%;
    height: auto;
    display: block;
}

.hyperlink {
    display: inline-block;
    position: relative;
    color: #b4b4b4;
}

.hyperlink:after {
    content: '';
    position: absolute;
    width: 100%;
    transform: scaleX(0);
    height: 2px;
    bottom: 15px;
    left: 0;
    background-color: #b4b4b4;
    transform-origin: bottom right;
    transition: transform 0.25s ease-out;
}

.hyperlink:hover:after {
    transform: scaleX(1);
    transform-origin: bottom left;
}

.sidenav {
    height: 100%;
    width: 0;
    position: fixed;
    z-index: 1;
    top: 0;
    right: 0;
    background-color: #111111;
    overflow-x: hidden;
    transition: 0.5s;
    padding-top: 60px;
}
  
.sidenav .closebtn {
    position: absolute;
    top: 0;
    right: 25px;
    font-size: 35px;
    margin-left: 50px;
}

.recipe-container {
    margin: 0px;
    padding: 10px;
    display: grid;
    grid-template-columns: auto auto auto;
    justify-content: center;
}

.recipe-window {
    margin: 10px;
    padding: 10px;
    border: 1px solid #ffffff;
    background-color: #ffffff;
    word-break: break-word;
    width: min-content;
    border-radius: 10px;
}

.recipe-title {
    color: black;
    margin-top: 5px;
    padding: 0px;
    font-size: 25px;
}

:root {
    color-scheme: dark;
}

.footer-links {
    display: flex;
    justify-content: center;
    align-items: center;
}

.footer-links p {
    margin: 0;
}

.footer-links a {
    color: #ffffff;
}

.footer-links a:hover {
    color: #b4b4b4;
}

.about {
    text-align: center;
    padding: 0 300px;
}

.mobile-nav {
    display: none;
}

.footer-logo {
    width: 150px;
}

mobile.css:

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500&display=swap');

* {
    box-sizing: border-box;
    scroll-behavior: smooth;
    font-family: 'Poppins', sans-serif;
}

body {
    background: linear-gradient( to right,#ff0000,#0000ff);
    margin: 0;
}

p {
    color:#ffffff;
    font-size:20px;
    padding: 10px;
}

.heading {
    margin: 20px;
    font-size: 30px;
    text-align: center;
    color: black;
}

a {
    text-decoration: none;
}

.slideshow-container {
  display: block;
  width: 80%;
  position: relative;
  margin: 10px;
  margin-left: auto;
  margin-right: auto;
}

.mySlides {
  display: none;
}

.prev, .next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  margin-top: -22px;
  padding: 16px;
  color: white;
  font-weight: bold;
  font-size: 18px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
}

.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

.prev:hover, .next:hover {
  background-color: #a6a6a650;
}

.slide-name {
  color: #f2f2f2;
  font-size: 15px;
  padding: 8px 12px;
  position: absolute;
  bottom: 8px;
  width: 100%;
  text-align: center;
}

.slide-number {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}

.fade {
  animation-name: fade;
  animation-duration: 1.5s;
}

@keyframes fade {
  from {opacity: .4}
  to {opacity: 1}
}

.progress-bar {
    width: 100%;
    border: none;
    border-radius: 100px;
    background-color: #FFFFFF;
    padding: 3px;
}

.progress-tag {
    color: #DDDDDD;
    margin-left: 10px;
}

.fill-html {
    width: 75%;
    background-color: #FA3200;
    border-radius: 100px;
}


.fill-css {
    width: 60%;
    background-color: #0000C8;
    border-radius: 100px;
}

.fill-js {
    width: 10%;
    background-color: #C80000;
    border-radius: 100px;
}

.fill-php {
    width: 3%;
    background-color: #00C832;
    border-radius: 100px;
}

.fill-rwpd {
    width: 100%;
    background-color: #450099;
    border-radius: 100px;
}

#return {
  display: none;
  position: fixed;
  bottom: 30px;
  right: 35px;
  z-index: 99;
  border: none;
  outline: none;
  background-color: #0000d1;
  color: white;
  cursor: pointer;
  border-radius: 100px;
  font-size: 45px;
  width: 60px;
  height: 60px;
  
}

#return:hover {
  background-color: #0101bb;
}

.progress-container {
    padding: 10px;
}

.header-logo {
    margin: 10px;
    float: left;
    width: 150px;
}

.header {
    background-color: #303030;
    overflow: hidden;
    width: 100%;
}

.desktop-nav {
    display: none;
}

.menu-button {
    display: block;
    margin: 30px 15px;
    font-size:25px;
    cursor:pointer;
    color:white;
    float: right;

}

.copyright {
    color: #b4b4b4;
    font-size: 15px;

}
  
footer {
    background: #303030;
    padding: 25px 0;
    text-align: center;
    bottom: 0;
    width: 100%;
    height: auto;
    display: block;
}

.hyperlink {
    display: inline-block;
    position: relative;
    color: #b4b4b4;
}

.hyperlink:after {
    content: '';
    position: absolute;
    width: 100%;
    transform: scaleX(0);
    height: 2px;
    bottom: 15px;
    left: 0;
    background-color: #b4b4b4;
    transform-origin: bottom right;
    transition: transform 0.25s ease-out;
}

.hyperlink:hover:after {
    transform: scaleX(1);
    transform-origin: bottom left;
}

.recipe-container {
    margin: 0px;
    padding: 10px;
    display: grid;
    grid-template-columns: auto auto auto;
    justify-content: center;
}

.recipe-window {
    margin: 10px;
    padding: 10px;
    border: 1px solid #ffffff;
    background-color: #ffffff;
    word-break: break-word;
    width: min-content;
    border-radius: 10px;
}

.recipe-title {
    color: black;
    margin-top: 5px;
    padding: 0px;
    font-size: 25px;
}

:root {
    color-scheme: dark;
}

.footer-links {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 15px;
}

.footer-links p {
    margin: 0;
}

.footer-links a {
    color: #ffffff;
}

.footer-links a:hover {
    color: #b4b4b4;
}

.about {
    text-align: center;
    padding: 0 300px;
}



.mobile-nav {
    float: right;
    margin-right: 20px;
}

.mobile-nav-panel {
    height: 100%;
    width: 0;
    position: fixed;
    z-index: 1;
    top: 0;
    right: 0;
    background-color: #111111;
    overflow-x: hidden;
    transition: 0.5s;
    padding-top: 60px;
}

.mobile-nav a {
    margin: 20px 0 0 0;
    padding: 0 0 20px;
    color: white;
    font-size: 20px;
}

.mobile-nav-panel .closebtn {
    position: absolute;
    top: 0px;
    right: 25px;
    font-size: 50px;
}

.mobile-nav-link-list {
    margin-right: 25px;
    padding-top: 50px;
    font-size: 1px;
    list-style: none;
    text-align: right;
}

.mobile-nav-link {
    padding: 25px 0;
    font-size: 1px;
}



.footer-logo {
    width: 125px;
}

This is the result (bottom-right corner):

Is there any way to do this?

Thanks

You can `opacity:0` only for mobile. and `pointer-events: none` — IT goldman, Nov 06 '22 at 19:06
@IT goldman It works for the visual aspect, but the actual functionallity of the button still exists. — BravoLima2k4, Nov 06 '22 at 19:08

score 1 · Answer 1 · answered Nov 06 '22 at 19:10

Add this to mobile.css and the button will be gone, visually.

#return {
  opacity: 0;
  pointer-events: none;
}

Otherwise you would have to compare against window.width to get the equivalent of media query (or actually viewport width, see this answer)

Another option, if you're using bootstrap is to check against visibility of the "width" classes. see this answer.

Is there a way to make a script element only activate under specific conditions?

1 Answers1