Angular: Empty Fiddle
http://angularjs.org/
HTML
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.min.js"></script>
<div ng-controller="MyCtrl">
<input ng-model="searchText" type="text">
<div id="list" auto-scroller id-to-scroll-to="'list'" trigger="searchText">
My List
</div>
</div>
CSS
#list {
margin-top:2000px;
}
JavaScript
var myApp = angular.module('myApp',[]);
myApp.controller('MyCtrl', function ($scope) {});
myApp.directive('autoScroller', function ($location, $anchorScroll, $timeout) {
return {
restrit: 'A',
scope: {
trigger: '=',
idToScrollTo: '='
},
link: function (scope, element, attrs) {
scope.$watch('trigger', function (newValue, oldValue) {
if (newValue && newValue !== oldValue) {
$timeout(function () {
$location.hash(scope.idToScrollTo);
$anchorScroll();
});
}
});
}
}
});