Scroll To Top angular.js directive

markup.html

<!-- Angular -->
<script src="../angular.min.js"></script>

<!-- jQuery -->
<script src="../jquery-2.1.1.min.js"></script>

<!-- Font Awesome -->
<link rel="stylesheet" type="text/css" media="screen" href="css/font-awesome.min.css">

<!-- Add the directive to your page -->
<div scroll-to-top=""></div>

scrollToTop.css

/* 
    Created on : May 5, 2015, 1:52:36 PM
    Author     : Nick
    Source     : http://www.webtipblog.com/adding-scroll-top-button-website/
*/

.scroll-top-wrapper {
    position: fixed;
    opacity: 0;
    visibility: hidden;
    overflow: hidden;
    text-align: center;
    z-index: 99999999;
    background-color: #777777;
    color: #eeeeee;
    width: 50px;
    height: 48px;
    line-height: 48px;
    right: 30px;
    bottom: 30px;
    padding-top: 2px;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
    border-bottom-left-radius: 10px;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
}
.scroll-top-wrapper:hover {
    background-color: #888888;
}
.scroll-top-wrapper.show {
    visibility:visible;
    cursor:pointer;
    opacity: 1.0;
}
.scroll-top-wrapper i.fa {
    line-height: inherit;
}

scrollToTop.js

angular.module('scrollToTop', [])
        .directive('scrollToTop', function () {

            /**
             *  This directive wraps jQuery code in an Angular application
             *  make sure you add the appropriate dependencies.
             *  Also don't forget to include in your project "angular.module('myApp', ["scrollToTop"]);"
             *  
             *  This directive is based on tutorial
             *  source: http://www.webtipblog.com/adding-scroll-top-button-website/
             *  
             * @type directive
             */

            var directive = {
                scope: {},
                restrict: 'AE',
                template: "<div class=\"scroll-top-wrapper \">\n\
                                <span class=\"scroll-top-inner\">\n\
                                    <i class=\"fa fa-2x fa-arrow-circle-up\"></i>\n\
                                </span>\n\
                           </div>",
                link: function () {

                    // hide or show button according to offset of window to page
                    $(function () {
                        $(document).on('scroll', function () {
                            if ($(window).scrollTop() > 100) {
                                $('.scroll-top-wrapper').addClass('show');
                            } else {
                                $('.scroll-top-wrapper').removeClass('show');
                            }
                        });
                    });

                    // handle click event
                    $(function () {
                        $(document).on('scroll', function () {
                            if ($(window).scrollTop() > 100) {
                                $('.scroll-top-wrapper').addClass('show');
                            } else {
                                $('.scroll-top-wrapper').removeClass('show');
                            }
                        });
                        $('.scroll-top-wrapper').on('click', scrollToTop);
                    });

                    function scrollToTop() {
                        verticalOffset = typeof (verticalOffset) !== 'undefined' ? verticalOffset : 0;
                        element = $('body');
                        offset = element.offset();
                        offsetTop = offset.top;
                        $('html, body').animate({scrollTop: offsetTop}, 500, 'linear');
                    }

                }
            };

            return directive;
        });