angular directive to add a fixed floater that scrolls page to top. appears only when scrolled down.

backToTop.js

app.directive("backToTop", ["$window", function ($window) {
    return {
        restrict: 'E',
        transclude: true,
        template: '<div class="back-to-top"><style>' +
            '.back-to-top {' +
            '    position: fixed;' +
            '    opacity: 0;' +
            '}' +
            '.back-to-top.active {' +
            '   opacity: 1;' +
            '}' +
            '</style>' +
            '<div ng-transclude /></div>',
        replace: true,
        link: function (scope, element, attrs) {
            var offset = parseInt(attrs.offset) || 220;
            var duration = parseInt(attrs.duration) || 100;
            var window = angular.element($window);
            window.scroll(function () {
                element.toggleClass("active", window.scrollTop() > offset);
            });

            element.click(function (event) {
                event.preventDefault();
                angular.element("html, body").animate({ scrollTop: 0 }, duration);
                return false;
            });
        }
    };
}]);

optional-styles.less

.back-to-top {
    bottom: 2em;
    right: 0px;
    border-top-left-radius: @cornerRadius;
    border-bottom-left-radius: @cornerRadius;
    color: @highlightColor;
    background-color: fade(@textColor, 40);
    font-size: 20px;
    padding: 1em;
    cursor: pointer;
    -moz-transition: all 200ms ease-in-out;
    -o-transition: all 200ms ease-in-out;
    -webkit-transition: all 200ms ease-in-out;
    transition: all 200ms ease-in-out;

    &:hover {
        background-color: fade(@textColor, 80);
    }
}

usage.html

<!-- Make sure you include angular :) -->

<back-to-top duration="700" title="Back To Top" offset="600">
    <span class="glyphicon glyphicon-hand-up"></span>
</back-to-top>

<!-- That's it folks... -->