I have a button with the class "scrollToTop" that, when clicked on, smoothly scrolls to the top of the page. Below is the JavaScript file for this functionality:
$(document).ready(function(){
// Check if the window is scrolled down and display the button
$(window).scroll(function(){
if ($(this).scrollTop() > 100) {
$('.scrollToTop').fadeIn();
} else {
$('.scrollToTop').fadeOut();
}
});
// Click event to scroll back to the top
$('.scrollToTop').click(function(){
$('html, body').animate({scrollTop : 0},800);
return false;
});
});
Additionally, this button has a hover effect defined as follows:
.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: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
}
However, the hover effect does not work well on mobile devices where tapping is required to trigger the hover effects. I am looking for a way to automatically remove the hover effect and set the opacity back to 0.5 once the page is scrolled back to the top without requiring any additional taps from the user. Is there a way to achieve this through jQuery or any other methods? Thank you in advance!