javascript - Moving to the selected row in the HTML table when the table has scrollbar -

i have table , using selected property of row when user clicks on row in table. in other panel have map , has employees displayed on it. each row in table has unique id , when user clicks on employee image on map employee row in table gets highlighted. if table has 40 rows have vertical scrollbar shown. when click on employee id 40 row in table gets selected row not shown in view because table has scrollbar , hidden scrollbar. following html code:

<div class="customtable">     <table class="table" id="employeestable">         <thead class="active">             <tr>                 <th>employee id</th>                 <th>employee state</th>             </tr>         </thead>         <tbody>             <div>                 <tr ng-repeat="employee in employees ng-class="{'selected':employee.empid == selectedrow}"  id="row{{employee.empid}}" "  style="cursor: pointer">                     <td>{{employee.empid}}</a></td>                     <td><span>{{employee.employeestate}}</span></td>                                                                 </tr>             </div>         </tbody>     </table> </div> 

now when click on employee image on map following code called:

$scope.employeedisplay = function(employee){             //to display employee in table             //called when employee clicked on map             var id = employee.empid;             $('#employeestable tr').eq(1).removeclass('selected');             $scope.selectedrow = empid //so based on employee particular row highlighted in table         } 

could let me know how table automatically display selected row if row not in initial view, table shows 20 rows , if employee id 40 selected table should scroll selected row.

here's jsfiddle has basic behavior you're looking for. scroll 40th element if not in view.

https://jsfiddle.net/reid_horton/odd0omk7/1/

it works setting scrolltop property of scrollbar element offsettop property of item want view, scrolling scrollbar point element @ top of viewport.

to check if item in view, compares current position of scrollbar position of element. uses height of viewport determine if element in viewable range of values.

html

<div ng-app="myapp" ng-controller="mainctrl">   <div class="scrolling-container">     <table>       <tr ng-repeat="k in items">         <td>{{ k }}</td>       </tr>     </table>   </div>   <!-- example, scroll 40th element -->   <button ng-click="scrollitemintoview()">     scroll bottom   </button> </div> 

js

var app = angular.module("myapp", []);  app.controller("mainctrl", function($scope) {    // populate table 0..100   $scope.items = [];   (var = 0; < 100; i++) {     $scope.items.push(i);   }    // function called when button clicked.   $scope.scrollitemintoview = function() {      var scrollelement = $('.scrolling-container')[0];     var itemtoview = $('tr')[40];      // goes down.     if (!itemisinviewport(itemtoview)) {       scrollelement.scrolltop = itemtoview.offsettop;     }      // determines if item in view.     function itemisinviewport(item) {       var $scrollelement = $('.scrolling-container');       var upperbound = item.offsettop;       var lowerbound = item.offsettop - $scrollelement.innerheight();       var currentposition = $scrollelement.scrolltop();       return lowerbound < currentposition && currentposition < upperbound;     }    }  });