I am currently implementing a "back to top" button that is fixed in the bottom left corner of the page. It fades in when the user scrolls past a certain point and hides again either when clicked or when the user scrolls back to the top. The functionality works well on desktop, but I am encountering issues with touch functionality on mobile devices. When the button is tapped on mobile, it activates the hover pseudo-class and tooltip, which remains even after scrolling back to the top. I suspect there might be additional code needed to handle touch events, but I'm not sure what exactly needs to be done.
For reference, you can view one of the portfolio pages on my website that features this button: www.nickolder.com/banknote.html
var $btt = $('.back_to_top');
// Scroll to top when user clicks back-to-top button
$btt.on('click', function (e) {
$('html, body').animate({
scrollTop: 0
}, 1200);
e.preventDefault();
});
// Show / hide back-to-top button depending on scroll position
$(window).on('scroll', function() {
var self = $(this),
height = self.height(),
top = self.scrollTop();
if ( top > height ) {
if ($btt.css('opacity') !== 1) {
$btt.removeClass('hide').addClass('show');
}
} else {
$btt.removeClass('show').addClass('hide');
}
});* {
margin: 0;
padding: 0;
}
p {
color: white;
}
p:last-of-type {
position: absolute;
bottom: 0;
}
div {
background: linear-gradient(rgba(20,230,170,1), rgba(20, 170, 230, 1));
height: 3000px;
width: 100vw;
position: relative;
}
.back_to_top {
position: fixed;
z-index: 3;
height: 40px;
width: 40px;
bottom: 20px;
left: 20px;
border-radius: 50%;
opacity: 0.7;
box-shadow: 0 2px 8px 0 rgba(0,0,0,0.3);
background: -webkit-linear-gradient(top, rgba(204,27,48,1), rgba(109,13,199,1.00));
background: -moz-linear-gradient(top, rgba(204,27,48,1), rgba(109,13,199,1.00));
background: -o-linear-gradient(to top, rgba(204,27,48,1), rgba(109,13,199,1.00));
background: linear-gradient(180deg, rgba(204,27,48,1), rgba(109,13,199,1.00));
}
.back_to_top:hover {
opacity: 1;
box-shadow: 0 6px 12px 0 rgba(0,0,0,0.4);
transform: translateY(-3px);
}
.back_to_top,
.back_to_top:hover {
transition: 0.3s ease;
will-change: transform, opacity;
}
.back_to_top::before,
.back_to_top::after {
position: absolute;
opacity: 0;
pointer-events: none;
will-change: opacity, transform;
}
.back_to_top::before {
content: 'Back to top';
color: rgba(255,255,255,0.8);
background-color: rgba(20,25,30,1);
border-radius: 4px;
width: 100px;
padding: 8px;
text-align: center;
left: 150%;
top: 3px;
}
.back_to_top::after {
border-bottom: 6px solid transparent;
border-right: 8px solid rgba(20,25,30,1);
border-top: 6px solid transparent;
left: 130%;
bottom: 13px;
width: 0;
content: '';
}
.back_to_top:hover::before,
.back_to_top:hover::after {
opacity: 1;
transform: translateX(-6px);
transition: 0.4s 0.4s ease;
will-change: opacity, transform;
}
.hide {
opacity: 0;
pointer-events: none;
}
.show {
opacity: 0.7;
}
.hide,
.show {
transition: 0.6s ease;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<p>Top</p>
<p>Bottom</p>
<a href="#" class="back_to_top hide"></a>
</div>