javascript - example - Desplácese hasta la parte superior de div en AngularJS?

ng-if

Question

Estoy usando AngularJS para una pequeña aplicación web y he encontrado un problema. Estoy usando ng-repeat para llenar una lista dentro de un div. El div tiene una altura fija y está configurado para overflow-y: auto , lo que significa que aparece una barra de desplazamiento cuando la lista es demasiado grande para el div. Mi problema es que cuando la lista se vuelve a dibujar, es decir, el respaldo de datos ng-repeat cambia, la barra de desplazamiento no se restablece a la parte superior del div. En cambio, permanece en la posición en la que estaba la barra de desplazamiento antes de que la repetición ng cambie. Esta es una experiencia de usuario muy pobre. He intentado lo siguiente sin suerte:

<div id="myList">
<ul>
<li ng-repeat="item in items">{{item}}</li>
</ul>
</div>
<a ng-click="switchItems()">Switch</a>
<script>
function MyApp($scope) {
$scope.switchItems = function() {
$(''#myList'').scrollTop();
$scope.items = [1, 2, 3, 4]; // new items
};
}
</script>

Answer 1

He enfrentado el mismo problema con el desplazamiento del cuerpo de la tabla. Lo he resuelto de la siguiente manera.

Aquí está mi ejemplo html.

<table id="rateplanmapping-scroll">
<thead>
<th></th>....
</thead>
<tbody >
<tr ng-repeat="data in datas"> //this is the data
<td></td>.....
</tr>
</tbody>
</table>

Aquí está el código angular para desplazarse a la parte superior

<script>
angular.element("#rateplanmapping-scroll tbody")[0].scrollTop=0;
</script>

Espero que ayude.
Puedes poner este script en la función requerida, así que cuando suceden cosas particulares, se activa automáticamente. O puede adjuntarse al evento también.

Para elemento div esto se puede hacer de la siguiente manera

http://plnkr.co/edit/0B4zrFTho6GYuPAS0S1A?p=preview

Gracias.

Answer 2

He tenido el mismo problema y generalmente lo resuelvo con la siguiente directiva genérica. Escucha un evento dado y cada vez que ocurre ese evento, desplaza el elemento a y = 0 . Todo lo que necesita hacer es $broadcast el evento en su controlador cuando su lista cambie.

angular.module("ui.scrollToTopWhen", [])
.directive("scrollToTopWhen", function ($timeout) {
function link (scope, element, attrs) {
scope.$on(attrs.scrollToTopWhen, function () {
$timeout(function () {
angular.element(element)[0].scrollTop = 0;
});
});
}
});

Uso:

// Controller
$scope.items = [...];
$scope.$broadcast("items_changed")
// Template
<div id="myList" scroll-to-top-when="items_changed">

Answer 3

Simplemente agregaría una directiva que vigile el contenido del DIV. ¡Luego se desplazará a la parte superior cada vez que el contenido cambie! Esta solución no requiere procesamiento de eventos (que creo que es innecesario aquí).

mod.directive(''scrollToTop'', function(){
return {
restrict: ''A'',
link: function postLink(scope, elem, attrs) {
scope.$watch(attrs.scrollToTop, function() {
elem[0].scrollTop = 0;
});
}
};
});

El marcado html luego usaría la directiva para activar el desplazamiento de esta manera:

<div class=''myList'' data-scroll-to-top=''data.items.length''>
<ul>
<li data-ng-repeat=''item in data.items''>{{item}}</li>
</ul>
</div>

A medida que agrega elementos a la lista, el DIV se desplazará a la parte superior. Aquí hay un jsFiddle con código de trabajo: http://jsfiddle.net/pkgbtw59/89/

Answer 4

También puede usar $ anchorScroll según los docs

// set the location.hash to the id of
// the element you wish to scroll to.
$location.hash(''bottom'');
// call $anchorScroll()
$anchorScroll();

Tendría que ajustar esto dentro de un $ timeout:

$timeout(function() {
$location.hash(''myList'');
$anchorScroll();
})