html 滚动顶部按钮（плавнаяпрокруткавверхстраницы）

Posted 2021-05-10

<!--  HTML  -->
<div class="c-top" title="Top" data-icon="ei-chevron-up" data-size="s"></div>

<!--  SCSS  -->
.c-top {
  position: fixed;
  bottom: 25px;
  right: -100px;
	z-index: 10;
	width: 50px;
  height: 50px;
	border-radius: 50%;  
	background-color: #E0E0E0;
	color: $gray;  
	cursor: pointer;
	transition: all .25s ease;
	opacity: .5;
  
  &.is-active {
    right: 30px;
  }
  
  &:hover {
		opacity: 1;
  }
}

<!--  JS  -->
$('.c-top').click(function () {
  $('html, body').stop().animate({ scrollTop: 0 }, 'slow', 'swing');
});
$(window).scroll(function () {
  if ($(this).scrollTop() > $(window).height()) {
    $('.c-top').addClass("is-active");
  } else {
    $('.c-top').removeClass("is-active");
  };
});