CODEWITHSUNDEEP
jqueryhtmlcss
Hayden
Hayden

Reputation: 498

Make "Scroll To Top" feature not show up on mobile

I am looking for a simple way to make the following "Scroll to Top" feature not show up on mobile devices. Are there a quick work-around for this?

Mainly, want to be able to take the scroll to top feature off since mobile has such limited space and there are easy functional ways to scroll to top on mobile (e.g. tapping top of the screen on iOS devices).

Here's the HTML, CSS, JQuery, and Liquid that I'm using: 

{% comment %} 
  Reduce below value if you need the back to the top button to appear higher up on the page. 
  That value is in pixels.
{% endcomment %}
{% assign vertical_offset_for_trigger = 300 %}
{% comment %} 
  Vertical offset from bottom of browser for the position of the button.
{% endcomment %}
{% assign position_from_bottom = '15em' %}

<a href="#" title="Back to the top" class="back-to-top">
  <span>Top</span> <i class="fas fa-angle-double-up"></i>
</a>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" integrity="sha384-lKuwvrZot6UHsBSfcMvOkWwlCMgc0TaWr+30HWe3a4ltaBwTZhyTEggF5tJv8tbt" crossorigin="anonymous">

<style>
.back-to-top {
  position: fixed;
  bottom: {{ position_from_bottom }};
  right: 10px;
  text-decoration: none;
  color: #999;
  background-color: #eee;
  font-size: 16px;
  padding: 0.3em;
  display: none;
  -webkit-border-top-left-radius: 3px;
  -webkit-border-bottom-left-radius: 3px;
  -moz-border-radius-topleft: 3px;
  -moz-border-radius-bottomleft: 3px;
  border-top-left-radius: 3px;
  border-bottom-left-radius: 3px;
  z-index: 60000;
}
.back-to-top i {
  vertical-align: middle;
}
.back-to-top span {
  padding-left: 0.5em;
}
.back-to-top i + span {
  padding-left: 0;
}
.back-to-top:hover {
  text-decoration: none;
  color: #555;
}
</style>

<script>
window.onload = function() {
 jQuery(function($) {
   var offset = {{ vertical_offset_for_trigger }};
   var duration = 500;
   $(window).scroll(function() {
     if ($(this).scrollTop() > offset) {
       $('.back-to-top').fadeIn(duration);
     } 
     else {
       $('.back-to-top').fadeOut(duration);
     }
   });
   $('.back-to-top').unbind('click.smoothscroll').bind('click', function(e) {
     e.preventDefault();
     $('html, body').animate( { scrollTop: 0 }, duration);
     return false;
   })
 });
}
</script>

Upvotes: 2

Views: 736

Answers (2)

Finesse
Finesse

Reputation: 10821

Add this CSS code:

@media (max-width: 600px), (max-height 700px) {
    .back-to-top {
        display: none !important; /* !important is used to override the jQuery style */
    }
}

It uses CSS Media Query to add a CSS rule which is applied only when the browser window width is less-or-equal than 600px or height is less-or-equal than 700px.

Upvotes: 3

Gru
Gru

Reputation: 80

you can achieve it by checking current screen with 

var h = $(window).height();
var w = $(window).width();

Then, just apply hide/show conditions for specific mobile view resolution.

if((h <= 480) && (w <= 640)){ 
  $('.back-to-top').hide(); 
} else {
  $('.back-to-top').show();
}

Wrap this condition in a function foo() & call that function on after page load.
Note : place foo() in common js file which is ur using in all pages.

Upvotes: 1

Related Questions