// HTML
<button class="top" title="Наверх"><i class="far fa-angle-double-up"></i></button>
// JS
function btnUp() {
let btnScroll = $('.top');
$(window).scroll( () => {
if ( $(this).scrollTop() > $(window).height() ) {
btnScroll.addClass('active');
} else {
btnScroll.removeClass('active');
}
});
btnScroll.on('click', () => {
$('html, body').stop().animate({scrollTop:0}, 'slow', 'swing');
});
} btnUp();
// SASS
.top
position: fixed
bottom: 25px
right: -100px
background-color: #fafafa
z-index: 12
border-radius: 50%
color: #666666
font-size: 26px
width: 50px
height: 50px
text-align: center
cursor: pointer
transition: all .3s ease
opacity: .5
display: flex
justify-content: center
align-items: center
&:hover
color: #fff
background-color: $accent
opacity: 1
&.active
right: 25px