JSFiddle - React, Tailwind, and code Playground

by Steven Senkus

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.8/angular.min.js"></script>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<div>
     <h1>Angular.js Scroll Directive</h1>

    <div id="results-container">
        <table class="table table-bordered table-striped" ng-controller="ResultsCtrl">
            <tbody>
                <tr ng-repeat="item in items">
                    <td>{{item}}</td>
                    <td>
                        <button class="btn btn-success" scroll-to-entry="top" scroll-item-index="{{$index}}">Scroll To Top</button>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
    <p>Click on table button to add item and scroll to its position</p>
</div>

CSS

body {
    text-align: center;
    background: url('http://ptrn.it/gncyDp') 0 0 repeat #eaeaea;
}
#results-container {
    background-color: #fff;
    border: 2px solid #eaeaea;
    border-bottom: 3px solid #999;
    border-radius: 3px;
    width: 400px;
    height: 260px;
    overflow: scroll;
    margin: 20px auto 10px;
    text-align: left;
}
#results-container table {
    box-shadow: inset 0px 0px 3px 2px #777;
}
#results-container table tr td {
    text-align: center;
}
#results-container table tr:nth-child(odd) {
    box-shadow: inset 0px 0px 13px 2px #333;
    color: #000;
    background-color: #aaa;
}
#results-container table tr:nth-child(even) {
    box-shadow: inset 0px 0px 13px 2px #333;
}
p {
    background-color: #000;
    color: #fff;
    padding: 20px;
}

JavaScript

jQuery.fn.highlight = function () {
    $(this).each(function () {
        var el = $(this);
        el.before("<tr/>")
        el.prev()
            .width(el.width())
            .height(el.height())
            .css({
            "position": "absolute",
                "background-color": "#ff9933",
                "opacity": ".9"
        })
            .fadeOut(500);
    });
}



angular.module('ScrollTopApp', [])

    .directive('scrollToEntry', function () {
    return {
        restrict: 'A',
        scope: {
            items: '@'
        },
        compile: function () {
            return {
                pre: function () {

                },
                post: function (scope, element, attr) {
                    element.on('click', function () {
                        $('#results-container').animate({
                            scrollTop: 0
                        }, 15000 / attr.scrollItemIndex, 'swing', function () {
                            scope.$emit('scroll.complete');
                            $('table tr:first').highlight();
                        });

                    });

                }

            };

        }

    }
})

    .controller('ResultsCtrl', ['$scope', function ($scope) {
    var rand = function () {
        return Math.random().toString(36).substr(2);
    };

    var token = function () {
        return rand() + rand(); // to make it longer
    };
    $scope.items = [];
    (function init() {

        for (var i = 0; i < 30; i++) {
            $scope.items.push(token());
        }
    })();
    var count = 0;
    console.log('controller');
    $scope.$on('scroll.complete', function () {
        console.log('yeep', count++);
        $scope.items.unshift('herp derp' + count);
        $scope.$apply();

    });
}]);