tablas - obtener datos de una tabla html javascript

El cambio de ruta no se desplaza hacia arriba en la nueva página

Question

He encontrado algún comportamiento no deseado, al menos para mí, cuando cambia la ruta. En el paso 11 del tutorial http://angular.github.io/angular-phonecat/step-11/app/#/phones puede ver la lista de teléfonos. Si se desplaza hacia la parte inferior y hace clic en uno de los más recientes, puede ver que el desplazamiento no está en la parte superior, sino que está en el medio.

También encontré esto en una de mis aplicaciones y me preguntaba cómo puedo hacer que esto se desplace hacia la parte superior. Puedo hacerlo manualmente, pero creo que debería haber otra forma elegante de hacer esto que no sé.

Entonces, ¿hay una forma elegante de desplazarse hacia arriba cuando cambia la ruta?

Answer 1

Aquí está mi (aparentemente) robusta, completa y (bastante) concisa solución. Utiliza el estilo compatible con minification (y el acceso angular.module (NAME) a ​​su módulo).

angular.module(''yourModuleName'').run(["$rootScope", "$anchorScroll" , function ($rootScope, $anchorScroll) {
$rootScope.$on("$locationChangeSuccess", function() {
$anchorScroll();
});
}]);

PD: encontré que el desplazamiento automático no tuvo efecto si se estableció en verdadero o falso.

Answer 2

Después de una o dos horas de probar cada combinación de ui-view autoscroll=true , $stateChangeStart , $locationChangeStart , $uiViewScrollProvider.useAnchorScroll() , $provide(''$uiViewScroll'', ...) , y muchos otros, no pude '' t obtener scroll-to-top-on-new-page para que funcione como se espera.

Esto fue en última instancia, lo que funcionó para mí. Captura pushState y replaceState y solo actualiza la posición de desplazamiento cuando se navega por las nuevas páginas (el botón de avance / retroceso conserva sus posiciones de desplazamiento):

.run(function($anchorScroll, $window) {
// hack to scroll to top when navigating to new URLS but not back/forward
var wrap = function(method) {
var orig = $window.window.history[method];
$window.window.history[method] = function() {
var retval = orig.apply(this, Array.prototype.slice.call(arguments));
$anchorScroll();
return retval;
};
};
wrap(''pushState'');
wrap(''replaceState'');
})

Answer 3

Encontré esta solución. Si vas a una nueva vista la función se ejecuta.

var app = angular.module(''hoofdModule'', [''ngRoute'']);
app.controller(''indexController'', function ($scope, $window) {
$scope.$on(''$viewContentLoaded'', function () {
$window.scrollTo(0, 0);
});
});

Answer 4

Establecer autoScroll en true no fue el truco para mí, así que elegí otra solución. Construí un servicio que se engancha cada vez que cambia la ruta y que usa el servicio $ anchorScroll incorporado para desplazarse hacia arriba. Funciona para mi :-).

Servicio:

 (function() {
"use strict";
angular
.module("mymodule")
.factory("pageSwitch", pageSwitch);
pageSwitch.$inject = ["$rootScope", "$anchorScroll"];
function pageSwitch($rootScope, $anchorScroll) {
var registerListener = _.once(function() {
$rootScope.$on("$locationChangeSuccess", scrollToTop);
});
return {
registerListener: registerListener
};
function scrollToTop() {
$anchorScroll();
}
}
}());

Registro:

angular.module("mymodule").run(["pageSwitch", function (pageSwitch) {
pageSwitch.registerListener();
}]);

Answer 5

Este código funcionó muy bien para mí ... Espero que también te funcione bien. Todo lo que tienes que hacer es inyectar $ anchorScroll a tu bloque de ejecución y aplicar la función de escucha al rootScope como lo he hecho en el siguiente ejemplo.

 angular.module(''myAngularApp'')
.run(function($rootScope, Auth, $state, $anchorScroll){
$rootScope.$on("$locationChangeSuccess", function(){
$anchorScroll();
});

Aquí está el orden de llamada del módulo Angularjs:

1. app.config()
2. app.run()
3. directive''s compile functions (if they are found in the dom)
4. app.controller()
5. directive''s link functions (again, if found)

El BLOQUEO DE EJECUCIÓN se ejecuta después de que se crea el inyector y se usa para iniciar la aplicación. Esto significa que cuando se redirige a la nueva vista de ruta, el oyente en el bloque de ejecución llama al

$ anchorScroll ()

y ahora puede ver que el desplazamiento comienza hacia arriba con la nueva vista enrutada :)

Answer 6

Esto funcionó para mí, incluyendo autoscroll

<div class="ngView" autoscroll="true" >

Answer 7

Finalmente he conseguido lo que necesitaba.

Necesitaba desplazarme hasta la parte superior, pero quería algunas transiciones para no hacerlo.

Puede controlar esto en un nivel de ruta por ruta.
Estoy combinando la solución anterior con @wkonkel y agregando un noScroll: true simple noScroll: true a algunas declaraciones de ruta. Entonces estoy captando eso en la transición.

En general: esto flota en la parte superior de la página en las nuevas transiciones, no flota en la parte superior de las transiciones Forward / Back , y le permite anular este comportamiento si es necesario.

El código: (solución anterior más una opción adicional noScroll)

 // hack to scroll to top when navigating to new URLS but not back/forward
let wrap = function(method) {
let orig = $window.window.history[method];
$window.window.history[method] = function() {
let retval = orig.apply(this, Array.prototype.slice.call(arguments));
if($state.current && $state.current.noScroll) {
return retval;
}
$anchorScroll();
return retval;
};
};
wrap(''pushState'');
wrap(''replaceState'');

Ponga eso en su bloque app.run e inyecte $state ... myApp.run(function($state){...})

Luego, si no desea desplazarse a la parte superior de la página, cree una ruta como esta:

.state(''someState'', {
parent: ''someParent'',
url: ''someUrl'',
noScroll : true // Notice this parameter here!
})

Answer 8

Ninguna de las respuestas proporcionadas resolvió mi problema. Estoy usando una animación entre vistas y el desplazamiento siempre sucedería después de la animación. La solución que encontré para que el desplazamiento hacia arriba ocurra antes de la animación es la siguiente directiva:

yourModule.directive(''scrollToTopBeforeAnimation'', [''$animate'', function ($animate) {
return {
restrict: ''A'',
link: function ($scope, element) {
$animate.on(''enter'', element, function (element, phase) {
if (phase === ''start'') {
window.scrollTo(0, 0);
}
})
}
};
}]);

Lo inserté en mi opinión de la siguiente manera:

<div scroll-to-top-before-animation>
<div ng-view class="view-animation"></div>
</div>

Answer 9

Para su información, para cualquier persona que se encuentre con el problema descrito en el título (como lo hice) que también utiliza el complemento de enrutador AngularUI ...

Como se pregunta y se responde en esta pregunta SO, el enrutador angular-ui salta a la parte inferior de la página cuando cambia las rutas.
¿No puedes entender por qué la página se carga en la parte inferior? Problema de desplazamiento automático de UI-Router angular

Sin embargo, como indica la respuesta, puedes desactivar este comportamiento diciendo autoscroll="false" en tu ui-view .

Por ejemplo:

<div ui-view="pagecontent" autoscroll="false"></div>
<div ui-view="sidebar" autoscroll="false"></div>

http://angular-ui.github.io/ui-router/site/#/api/ui.router.state.directive:ui-view

Answer 10

Pruebe este http://ionicframework.com/docs/api/service/ $ ionicScrollDelegate /

Se desplaza hasta la parte superior de la lista scrollTop ()

Answer 11

Si usa ui-router puede usar (en ejecución)

$rootScope.$on("$stateChangeSuccess", function (event, currentState, previousState) {
$window.scrollTo(0, 0);
});

Answer 12

Solo pon este código para correr

$rootScope.$on("$routeChangeSuccess", function (event, currentRoute, previousRoute) {
window.scrollTo(0, 0);
});

Answer 13

Todas las respuestas anteriores rompen el comportamiento esperado del navegador. Lo que la mayoría de la gente quiere es algo que se desplace hacia la parte superior si es una página "nueva", pero regrese a la posición anterior si llega a través del botón Atrás (o Adelante).

Si asumes el modo HTML5, esto resulta ser fácil (aunque estoy seguro de que algunas personas brillantes pueden descubrir cómo hacerlo más elegante):

// Called when browser back/forward used
window.onpopstate = function() {
$timeout.cancel(doc_scrolling);
};
// Called after ui-router changes state (but sadly before onpopstate)
$scope.$on(''$stateChangeSuccess'', function() {
doc_scrolling = $timeout( scroll_top, 50 );
// Moves entire browser window to top
scroll_top = function() {
document.body.scrollTop = document.documentElement.scrollTop = 0;
}

La forma en que funciona es que el enrutador asume que se desplazará hacia la parte superior, pero se demora un poco para que el navegador tenga la oportunidad de terminar. Si el navegador nos notifica que el cambio se debió a una navegación Atrás / Adelante, cancela el tiempo de espera y el desplazamiento nunca se produce.

Usé comandos de document procesar para desplazarme porque quiero moverme a la parte superior completa de la ventana. Si solo quieres que tu ui-view desplace, configura autoscroll="my_var" donde controlas my_var usando las técnicas anteriores. Pero creo que la mayoría de las personas querrán desplazarse por toda la página si vas a la página como "nueva".

Lo anterior usa ui-router, aunque podría usar ng-route en lugar de cambiar $routeChangeSuccess por $stateChangeSuccess .

Answer 14

Un poco tarde para la fiesta, pero he intentado todos los métodos posibles, y nada funcionó correctamente. Aquí está mi solución elegante:

Uso un controlador que gobierna todas mis páginas con ui-router. Me permite redirigir a los usuarios que no están autenticados o validados a una ubicación apropiada. La mayoría de las personas ponen su middleware en la configuración de su aplicación, pero yo necesitaba algunas solicitudes http, por lo tanto, un controlador global funciona mejor para mí.

Mi index.html se ve como:

<main ng-controller="InitCtrl">
<nav id="top-nav"></nav>
<div ui-view></div>
</main>

Mi initCtrl.js se parece a:

angular.module(''MyApp'').controller(''InitCtrl'', function($rootScope, $timeout, $anchorScroll) {
$rootScope.$on(''$locationChangeStart'', function(event, next, current){
// middleware
});
$rootScope.$on("$locationChangeSuccess", function(){
$timeout(function() {
$anchorScroll(''top-nav'');
});
});
});

He intentado todas las opciones posibles, este método funciona mejor.

Answer 15

Usando angularjs UI Router, lo que estoy haciendo es esto:

 .state(''myState'', {
url: ''/myState'',
templateUrl: ''app/views/myState.html'',
onEnter: scrollContent
})

Con:

var scrollContent = function() {
// Your favorite scroll method here
};

Nunca falla en ninguna página, y no es global.

Answer 16

puedes usar este javascript

$anchorScroll()

Answer 17

El problema es que su ngView conserva la posición de desplazamiento cuando carga una nueva vista. Puede indicar a $anchorScroll que "desplace la ventana después de que se actualice la vista" (los docs son un poco vagos, pero el desplazamiento aquí significa desplazarse hasta la parte superior de la nueva vista).

La solución es agregar autoscroll="true" a su elemento ngView:

<div class="ng-view" autoscroll="true"></div>