How to remove :hover on phones after is clicked

Question

I implemented "scroll to top" arrow from this codepen on my website:

jQuery:

// ===== Scroll to Top ==== 
$(window).scroll(function() {
    if ($(this).scrollTop() >= 50) {        // If page is scrolled more than 50px
        $('#return-to-top').fadeIn(200);    // Fade in the arrow
    } else {
        $('#return-to-top').fadeOut(200);   // Else fade out the arrow
    }
});
$('#return-to-top').click(function() {      // When arrow is clicked
    $('body,html').animate({
        scrollTop : 0                       // Scroll to top of body
    }, 500);
});

CSS:

#return-to-top {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background: rgb(0, 0, 0);
    background: rgba(0, 0, 0, 0.7);
    width: 50px;
    height: 50px;
    display: block;
    text-decoration: none;
    -webkit-border-radius: 35px;
    -moz-border-radius: 35px;
    border-radius: 35px;
    display: none;
    -webkit-transition: all 0.3s linear;
    -moz-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}
#return-to-top i {
    color: #fff;
    margin: 0;
    position: relative;
    left: 16px;
    top: 13px;
    font-size: 19px;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}
#return-to-top:hover {
    background: rgba(0, 0, 0, 0.9);
}
#return-to-top:hover i {
    color: #fff;
    top: 5px;
}

It works good on desktop, but has a problem on phone screens. When the arrow is clicked and the screen scrolled to top, if we scroll down again, the arrow gets shown in :hover state.

How can I "unset" the hover after the click?

EDIT:

Here's a screencast that shows the problem: https://streamable.com/5wr27

Answer 1

Since the :hover state you are referring to is lost when a mouse leaves the element, then all styles applied to such state are also lost, returning the element's styles to their originals.

This behavior does not happen in a mobile device screen since you have to press it with something, rather than just hovering over it. In this case the element retains the styles applied when pressing it, instead of losing them (as would happen when the mouse leaves the element).

All you have to do is return the element to its previous state manually, could be this:

// ===== Scroll to Top ==== 
$(window).scroll(function() {
  if ($(this).scrollTop() >= 50) { // If page is scrolled more than 50px
    $('#return-to-top').fadeIn(200); // Fade in the arrow
  } else {
    $('#return-to-top').fadeOut(200); // Else fade out the arrow
  }
});
$('#return-to-top').click(function() { // When arrow is clicked
  $('body,html').animate({
    scrollTop: 0 // Scroll to top of body
  }, 500);
});

#return-to-top {
  position: fixed;
  bottom: 20px;
  right: 20px;
  background: rgb(0, 0, 0);
  background: rgba(0, 0, 0, 0.7);
  width: 50px;
  height: 50px;
  display: block;
  text-decoration: none;
  -webkit-border-radius: 35px;
  -moz-border-radius: 35px;
  border-radius: 35px;
  display: none;
  -webkit-transition: all 0.3s linear;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}

#return-to-top i {
  color: #fff;
  margin: 0;
  position: relative;
  left: 16px;
  top: 13px;
  font-size: 19px;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}

#return-to-top:hover {
  background: rgba(0, 0, 0, 0.9);
}

#return-to-top:hover i {
  color: #fff;
  top: 5px;
}

#return-to-top:not(:focus),
#return-to-top:not(:active) {
  background: rgba(0, 0, 0, 0.7);
}

#return-to-top:not(:focus) i,
#return-to-top:not(:active) i {
  top: 13px
}


/* Extra Things */

body {
  background: #eee;
  font-family: 'Open Sans', sans-serif;
}

h3 {
  font-size: 30px;
  font-weight: 400;
  text-align: center;
  margin-top: 50px;
}

h3 i {
  color: #444;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Return to Top -->
<a href="javascript:" id="return-to-top"><i class="icon-chevron-up"></i></a>


<!-- ICON NEEDS FONT AWESOME FOR CHEVRON UP ICON -->
<link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet">


<!-- Test the scroll -->
<div style="height:2000px;">

  <h3>Scroll down</h3>
  <h3><i class="icon-arrow-down"></i>

</div>

You can also check out this answer to apply those styles ONLY for mobile devices.

Answer 2

Just try javascript:

<a onclick="this.blur();">Top</a>

OR

$('#return-to-top').click(function() {
$(this).blur();
 $('body,html').animate({
      scrollTop : 0                       // Scroll to top of body
  }, 500);
});

CSS:

#return-to-top:focus {
  outline: none;
}

Answer 3

I don't think you can have a :hover effect on touchscreens.

Instead maybe use a :active or :clicked selector inside a media query

media only screen and (max-width: 600px) { 
    return-to-top:active {
        background: rgba(0, 0, 0, 0.9);
    }
}

Something like that maybe? You can look up the right widths to use.

Answer 4

I think that what is happening is that the :hover is always attached so it is been considerated as being hovered. So you need to remove the hover. I found that the solution can be by add

$('yourelement').die('click');

I hope that this solution helps you.

  $(window).scroll(function() {
  if ($(this).scrollTop() >= 50) {        // If page is scrolled more than 50px
     $('#return-to-top').fadeIn(200);    // Fade in the arrow
  } else {
     $('#return-to-top').fadeOut(200);
     $('a').die('click');
   // Else fade out the arrow
  }
});