AngularJS Back To Top Directive

AngularJS Back To Top Directive

 AngularJS Back To Top Directive.
 
 Uses AngularJS, jQuery, Font Awesome, and SCSS.

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;
	}

}