Scrolltop

Html

<div class="scroll-top" data-scroll-top>
	<svg class="scroll-top__icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 284.9 284.9"><path d="M282.1 195.3L149 62.2c-1.9-1.9-4.1-2.9-6.6-2.9s-4.7 1-6.6 2.9L2.9 195.3C1 197.2 0 199.4 0 201.9c0 2.5 1 4.7 2.9 6.6l14.3 14.3c1.9 1.9 4.1 2.9 6.6 2.9 2.5 0 4.7-1 6.6-2.9l112.2-112.2 112.2 112.2c1.9 1.9 4.1 2.8 6.6 2.8 2.5 0 4.7-1 6.6-2.8l14.3-14.3c1.9-1.9 2.8-4.1 2.8-6.6C284.9 199.4 284 197.2 282.1 195.3z" /></svg>
</div>

Scss

		
.scroll-top {
	position: fixed;
	z-index: 9;
	background-color: $color-black;
	bottom: 5rem;
	right: 5rem;
	width: 5rem;
	height: 5rem;
	border-radius: 50%;
	opacity: 0;
	visibility: hidden;
	transition: $transition;
	cursor: pointer;

	&.visible {
		visibility: visible;
		opacity: 1;
	}

	&:hover {
		transform: scale(1.075);
	}

	&__icon {
		position: absolute;
		top: 1.7rem;
		left: 1rem;
		width: 3rem;
		height: 1.6rem;
		z-index: 1;
		fill: $color-white;
	}
}

JavaScript

export class ScrollTop {
	scrollTop: HTMLElement = document.querySelector("[data-scroll-top]");
	visibleClass: string = "visible";
	constructor() {
		this.scrollTopFunction();
		this.scrollOnClickFunction();
		window.addEventListener("scroll", this.scrollTopFunction, false);
	}

	private scrollTopFunction = () => {
		let windowHeight: number = window.innerHeight;
		let documentHeight: number = document.body.offsetHeight;
		let scrollTop: number = window.pageYOffset || document.documentElement.scrollTop;
		// add class if user scrolls more than 700 or reaches the bottom
		if ((scrollTop >= 700) || scrollTop + windowHeight > documentHeight - 100) {
			this.scrollTop.classList.add(this.visibleClass);
		} else {
			this.scrollTop.classList.remove(this.visibleClass);
		}
	}
	private scrollOnClickFunction = () => {
		this.scrollTop.addEventListener("click", () => {
			window.scrollTo({
				'behavior': 'smooth',
				'left': 0,
				'top': 0
			});
		});
	}
}