A simple button that hovers on the right side of the screen, and when clicked returns you to top.
Screenshots:
Code to add to head:
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
$(document).ready(function(){
//Check to see if the window is top if not then display button
$(window).scroll(function(){
if ($(this).scrollTop() > 100) {
$('.scrollToTop').fadeIn();
} else {
$('.scrollToTop').fadeOut();
}
});
//Click event to scroll to top
$('.scrollToTop').click(function(){
$('html, body').animate({scrollTop : 0},800);
return false;
});
});
</script>
<a href="#" class="scrollToTop"><i class="fas fa-chevron-up"></i></a>
CSS Code:
.scrollToTop{
width: 36px;
-webkit-tap-highlight-color: rgba(255, 255, 255, 0);
bottom: 80px;
font-size: 16px;
margin-bottom: 0;
text-align: center;
cursor: pointer;
border-radius: @border-radius;
padding: 6px 0;
color: white;
background: black;
opacity: 0.7;
border: 0;
font-weight: 900;
position:fixed;
right:30px;
display:none;
z-index: 1000;
}
.scrollToTop:hover{
text-decoration:none;
background-color: darken(fadein(@control-bg, 50%), 50%);
}
