Desplazar automáticamente la tabla cuando la fila seleccionada es la fila antes de la última fila

Tengo un problema relacionado con la tabla de desplazamiento. introduzca la descripción de la imagen aquí

Cuando se carga la página, la primera fila (ROW 1) será la fila seleccionada por defecto (fila resaltada). Si hacemos clic en el siguiente botón, la siguiente fila será seleccionada y resaltada. El problema es si se selecciona la FILA> = 8 (por ejemplo, la FILA 9, 10 …), la tabla no se desplaza automáticamente por lo que no podemos ver la selección actual también se está resaltando. Los comportamientos deben ser como sigue la imagen: introduzca la descripción de la imagen aquí

Cuando se selecciona la FILA 8, la tabla debe desplazarse automáticamente. En este momento, la siguiente fila (ROW 9) es VISIBLE y las filas superiores deben ser invisibles.

Mi propósito es en la fila actual seleccionada. También puedo ver la siguiente fila. La tabla debe desplazarse cuando hago clic en el botón siguiente / anterior hasta llegar a la última fila visible y luego esa fila se convertirá en la fila antes de la última fila.

No tengo ninguna idea para resolver este problema. Por favor, ayúdame.

Saludos cordiales, Ken.

El siguiente fragmento de código hace uso de la ventana para desplazarse a tr específico de la table .

En cada siguiente / anterior, haga clic en boost / disminuir el índice selectedIndex y, a continuación, desplácese hasta ese índice de fila en la tabla.

 var app = angular.module("app", []); app.controller("ctrl", function($scope) { $scope.selectedIndex = 0; $scope.rows = ["Row1", "Row2", "Row3", "Row4", "Row5", "Row6", "Row7", "Row8", "Row9", "Row10", "Row11", "Row12", "Row13", "Row14", "Row15", "Row16", "Row17", "Row18"]; $scope.NextRow = function() { $scope.selectedIndex = $scope.selectedIndex === $scope.rows.length - 1 ? $scope.rows.length - 1 : $scope.selectedIndex + 1; var w = $(window); var row = $('table').find('tr').eq($scope.selectedIndex); if (row.length) { w.scrollTop(row.offset().top - (w.height() / 2)); } } $scope.PrevRow = function() { $scope.selectedIndex = $scope.selectedIndex === 0 ? 0 : $scope.selectedIndex - 1;; var w = $(window); var row = $('table').find('tr').eq($scope.selectedIndex); if (row.length) { w.scrollTop(row.offset().top - (w.height() / 2)); } } }); 
 body { padding-top: 50px; } .anchor { border: 2px dashed DarkOrchid; padding: 5px 5px 5px 5px; } .fixed-header { background-color: rgba(0, 0, 0, 0.2); height: 50px; position: fixed; top: 0; left: 0; right: 0; } .fixed-header>a { display: inline-block; margin: 5px 15px; } 
    
{{row}}