kagorastidis
10/18/2016 - 11:09 AM

Back to top button. Offset aka 680 is the height of the page to start

Back to top button. Offset aka 680 is the height of the page to start

var _initBackTotopBtn = (backToTopBtnId) => {
	jQuery(window).scroll( (e) =>{
		if(window.pageYOffset >= 680) {
			jQuery(backToTopBtnId).show('slow');
		}
		else{
			jQuery(backToTopBtnId).hide('slow');
		}
	});
	jQuery(backToTopBtnId).click( (e) => {
		jQuery("html, body").animate({ scrollTop: 0 }, "slow");
		return false;
	});
}
<div class= "backToTop">
  <i class="material-icons">keyboard_arrow_up</i>
</div>
.backToTop {
  align-items: center;
  background: var(--pink);
  border-radius: 50%;
  bottom: 10px;
  color: #fff;
  display: flex;
  font-size: 50px;
  height: 50px;
  justify-content: center;
  padding: 16px 0;
  position: fixed;
  right: 10px;
  width: 50px;
  transition: all .5s ease;
}

.backToTop:hover {
  background: var(--main-text-color);
  cursor: pointer;
  transform: rotate(360deg);
}