// SASS

/**
 * Top link
 * --------
 */

$mobile-size: 40px;
$desktop-size: 50px;
$mobile-offset: 20px;
$desktop-offset: 40px;
$default-color: #333;
$hover-color: #000;

.to-top {
	background-color: $default-color;
	background-image: url('arrow');
	background-position: center 10px;
	background-repeat: no-repeat;
	background-size: 20px;
	bottom: $mobile-offset;
	cursor: pointer;
	height: $mobile-size;
	line-height: $mobile-size;
	opacity: 0;
	pointer-events: none;
	position: fixed;
	right: $mobile-offset;
	text-align: center;
	transition: all 0.5s ease-in-out;
	width: $mobile-size;
	z-index: 1;
}

@media(min-width: 1001px) {
	.to-top {
		background-position: center 15px;
		background-size: 20px;
		bottom: $desktop-offset;
		height: $destkop-size;
		line-height: $destkop-size;
		right: $desktop-offset;
		width: $destkop-size;
	}
}

	.to-top:hover {
		background-color: $hover-color;
	}

.show-to-top .to-top {
	opacity: 1;
	pointer-events: auto;
}

// JQUERY

/**
 * Top link
 * --------
 */

// [1] where to jump to
// [2] point from where to show link

// append link
$('body').append('<a class="to-top" title="Terug naar boven" href="[1]"></a>');

// smooth scroll to top of page
$('.to-top').on('click', function(event) {
	event.preventDefault();

	$('html, body').animate({
		scrollTop: $($.attr(this, 'href')).offset().top
	}, 500);
});

// check offset top
function checkOffset() {
	requestAnimationFrame(checkOffset);

	if($(window).scrollTop() > $('[2]').height()) {
		$('body').addClass('show-to-top');
	} else {
		$('body').removeClass('show-to-top');
	}
}

requestAnimationFrame(checkOffset);