AngularJS Back To Top Directive

back-to-top-directive.js

// Back to top Directive

angular
.module('app.directives')
.directive('backToTop', function() {
	return {
		restrict: 'E', 
		replace: true, 
		template: '<div class="back-to-top"><i class="fa fa-chevron-up"></i></div>', 
		link: function($scope, element, attrs) {
			$(window).scroll(function() {
				if ($(window).scrollTop() <= 0) 
				{
					$(element).fadeOut();
				} else {
					$(element).fadeIn();
				}
			});

			$(element).on('click', function(){
				$('html, body').animate({ scrollTop: 0 }, 'fast');
			});
		}
	}
});

back-to-top-style.scss

// Back to top styles

.back-to-top {
	position: fixed;
	bottom: 20px;
	right: 20px;
	z-index: 1;
	width: 50px;
	height: 50px;
	background: #DDD;
	opacity: 0.5;
	display: none;

	&:hover {
		opacity: 1;
		cursor: pointer;
	}

	i {
		font-size: 25px;
		padding: 12px;
		color: #FFF;
	}

}