Disable the 'scroll up' script for mobile devices

Question

Disable the 'scroll up' script for mobile devices

I am using the code below in my < head > tags to create a button that fades in when the window is 150px from the bottom.

<script>
  $(window).scroll(function () {
if ($(window).scrollTop() + $(window).height() > ($(document).height() - 150)) {
    $("#up-btn").fadeIn(500);
} else {
    $("#up-btn").fadeOut(500);
}
});
</script>

Here is the CSS code:

#up-btn {
position: fixed;
display: none;
font-size: 1em;
font-weight: 700;
letter-spacing: 2px;
text-transform: uppercase;
bottom: -4px; right: 3%;
color: #fff;
border-radius: 2px;
background-color: #1aa97f;
padding: 18px 20px; margin: 25px auto 0 auto;
}

And here is the HTML code:

<footer>
  <a id="up-btn" href="javascript:void(0);" onclick="scrolltop();">TOP <i class="fa fa-chevron-up"></i></a>
</footer>

My goal is to make sure that the #up-btn remains hidden on mobile devices.

javascript jquery html css

Answer 1

Answer №1

To ensure your javascript code only runs on devices with a minimum width, you can enclose it in a conditional statement like so:

if ($(window).width() > 768) {
    $(window).scroll(function () {
        if ($(window).scrollTop() + $(window).height() > ($(document).height() - 150)) {
            $("#up-btn").fadeIn(500);
        } else {
            $("#up-btn").fadeOut(500);
        }
    });
};

Simply replace '768' with the desired minimum device width for your script to execute. This snippet essentially ensures that your script will only run once the viewport size reaches an iPad-like format.

Answer 2

To ensure your javascript code only runs on devices with a minimum width, you can enclose it in a conditional statement like so:

if ($(window).width() > 768) {
    $(window).scroll(function () {
        if ($(window).scrollTop() + $(window).height() > ($(document).height() - 150)) {
            $("#up-btn").fadeIn(500);
        } else {
            $("#up-btn").fadeOut(500);
        }
    });
};

Simply replace '768' with the desired minimum device width for your script to execute. This snippet essentially ensures that your script will only run once the viewport size reaches an iPad-like format.

Answer 3

Answer №2

One way to determine if the screen size is for a mobile device in Javascript is by using matchMedia, which serves as the counterpart to CSS media queries.

For example, following the code snippet from MDN:

if (window.matchMedia("(min-width: 400px)").matches) {
  /* The viewport width is at least 400 pixels */
} else {
  /* The viewport width is less than 400 pixels */
}

Answer 4

One way to determine if the screen size is for a mobile device in Javascript is by using matchMedia, which serves as the counterpart to CSS media queries.

For example, following the code snippet from MDN:

if (window.matchMedia("(min-width: 400px)").matches) {
  /* The viewport width is at least 400 pixels */
} else {
  /* The viewport width is less than 400 pixels */
}

Disable the 'scroll up' script for mobile devices

Answer №1

Answer №2

Similar questions

Error encountered in React: When a parent component tries to pass data to a child

Styling an Angular2 Component with a jQueryUI element

Issue with Jquery's .addClass and .removeClass functions

The functionality of the `next-auth` signOut button click does not seem to accept a variable as input, although

"Troubleshooting: Why does a DT Datatable with selectInputs keep reverting back to

Unable to alter the input data within the LCJS chart

The "track by" feature in Angular doesn't seem to be functioning properly when used with an array from $

Retrieve the HTTP Code and Response Header for a successful AJAX request

Is there a way for me to generate a custom subtype of Error that can be thrown?

ES6 does not allow the use of native setters when extending the HTMLButtonElement

I am struggling to extract data from the spawned Node.js child process. What am I overlooking?

Track and log specific route requests with ExpressJS morgan feature

"Simultaneously creating a Firebase user account and populating the database with user

AddThis plugin in Wordpress is unresponsive when used with a theme that relies heavily

Safari: Contenteditable div text without spaces fails to wrap around an image when focused

Having trouble with the JQuery scrollTop animation? Getting the error message "Cannot read property 'top' of undefined"?

Encountered a glitch during the npm installation process for mui core

Refreshing jQuery Event Bindings After Ajax Update (Using UpdatePanel)

the function does not wait for the DOM content to finish loading

Emulate the impact of Stackoverflow