Scroll to top button

script.js

$(document).ready(function() {

	// Scroll to top button
	$(window).scroll(function () {
		if ($(this).scrollTop() > 100) {
			$('.scrollup').addClass('visible');
		} else {
			$('.scrollup').removeClass('visible');
		}
	});
	$('.scrollup').click(function () {
		$("html, body").animate({
			scrollTop: 0
		}, 600);
		return false;
	});
});

Scroll-to-top-button.html

<!--Add to footer-->
<a href="#" class="scrollup">
	<span>Scroll up</span>
	<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M6.582,12.141c-0.271,0.268-0.709,0.268-0.978,0c-0.269-0.268-0.272-0.701,0-0.969l3.908-3.83c0.27-0.268,0.707-0.268,0.979,0l3.908,3.83c0.27,0.267,0.27,0.701,0,0.969c-0.271,0.268-0.709,0.268-0.979,0L10,9L6.582,12.141z"/></svg>
</a>

style.scss

// Scroll to top
.scrollup {
	width: 40px;
	height: 40px;
	position: fixed;
	transition: $transition;
	opacity: 0;
	visibility: hidden;
	background-color: $blackish;
	bottom: 5px;
	right: 5px;
	@include breakpoint(medium) {
		bottom: 25px;
		right: 25px;
	}
	@include breakpoint(large) {
		bottom: 50px;
		right: 100px;
	}
	&.visible {
		opacity: 1;
		visibility: visible;
	}
	&:hover {
		@include breakpoint(large) {
			background-color: $primary;
		}
		svg {
			@include breakpoint(large) {
				fill: $blackish;
			}
		}
	}
	span {
		@include element-invisible;
	}
	svg {
		transition: $transition;
		fill: $primary;
	}
}