javascript - Make an element lose focus in jquery -

i have button class "scrolltotop" scrolls top of page when clicked on. here's js file:

$(document).ready(function(){    //check see if window top if not display button   $(window).scroll(function(){     if ($(this).scrolltop() > 100) {         $('.scrolltotop').fadein();     } else {         $('.scrolltotop').fadeout();     }   });    //click event scroll top   $('.scrolltotop').click(function(){     $('html, body').animate({scrolltop : 0},800);     return false;   });   }); 

so button has :hover property:

.scrolltotop:hover{   opacity: 1.0;   box-shadow: 0 10px 20px rgba(0,0,0,0.25), 0 8px 8px rgba(0,0,0,0.22);   -webkit-transition: 0.4s ease-in-out;   -moz-transition: 0.4s ease-in-out;   -o-transition: 0.4s ease-in-out;   transition: 0.4s ease-in-out; } 

now, know :hover doesn't work in mobile devices i.e. 1) have click on button change opacity 1.0 & 2) have tap elsewhere change opacity before (let's say, 0.5).

here, i'm wanting simulate 2nd part. want edit jquery such when page scrolled top, scrolltotop automatically loses focus, loses :hover effect , opacity automatically returns 0.5 without user having tap elsewhere. hope made myself clear. possible? if not, there other ways same result? in advance!

if i've got right, think need use:

 $('.scrolltotop').blur(); 

so can put in:

$('.scrolltotop').click(function(){     // remove focus button     $('.scrolltotop').blur();     $('html, body').animate({scrolltop : 0},800);             return  }); 

alternatively, stackoverflow question suggests using ontouchend event removing , re-appending element dom:

$('.scrolltotop').on('touchend', function(){     var el = this;     var par = el.parentnode;     var next = el.nextsibling;     par.removechild(el)     settimeout(function() {         par.insertbefore(el, next);     },0); });