javascript - start - ui router ejemplos
Desplazamiento automático a TOP con ui-router y Angularjs (7)
He leído tantos problemas diferentes con esto y ninguna de las soluciones dadas parece ajustarse a mi caso de uso. Comencé simplemente poniendo target = "_ top" en todos mis enlaces, pero eso realmente obliga a mi aplicación a recargar, lo que no funcionará. También he visto a personas decir que usan autoscroll = "true", pero eso solo parece funcionar si está dentro de mi ui-view .
El problema con esto es que en mi archivo index.html tengo un navegador fijo y otros elementos estáticos que están por encima de mi primera vista de interfaz de usuario. Esto significa que cuando voy a otras páginas pierdo la navegación a medida que la página se carga más allá de esos elementos. También intenté poner esto en el cuerpo con:
<body autoscroll="true">
</body>
Esto tampoco parece hacer nada. Entonces, la pregunta es, ¿cómo puedo asegurarme de que las páginas nuevas (cambios de ruta nuevos desde ui-router) comiencen en la parte superior de la página? ¡GRACIAS!
Estoy usando el enrutador ui. Mi carrera se veía así:
.run(function($rootScope, $state, $stateParams){
$rootScope.$state = $state;
$rootScope.$stateParams = $stateParams;
$rootScope.$on(''$stateChangeSuccess'', function() {
document.body.scrollTop = document.documentElement.scrollTop = 0;
});
})
Hay un servicio angular para esto. https://docs.angularjs.org/api/ng/service/$anchorScroll
Código de muestra:
.run(function ($rootScope, $state, $stateParams, $anchorScroll) {
$rootScope.$on(''$stateChangeStart'', function () {
$anchorScroll();
});
});
Si desea desplazarse a un elemento específico
.run(function ($rootScope, $state, $stateParams, $anchorScroll) {
$rootScope.$on(''$stateChangeStart'', function () {
// set the location.hash to the id of
// the element you wish to scroll to.
$location.hash(''bottom'');
// call $anchorScroll()
$anchorScroll();
});
});
Hizo lo mismo que la respuesta exceptuada de @TaylorMac pero en $ locationChangeStart.
index.run.js:
$rootScope.$on(''$locationChangeStart'', function() {
document.body.scrollTop = document.documentElement.scrollTop = 0;
});
Si desea que siempre se desplace a 0 cross-browser, no haga nada con el desplazamiento automático. Simplemente coloque este su bloque de ejecución:
$rootScope.$on(''$stateChangeSuccess'', function() {
document.body.scrollTop = document.documentElement.scrollTop = 0;
});
Tuve exactamente el mismo problema, solucioné la barra de navegación en los cambios de ruta, la carga de la página se desplazó parcialmente hacia abajo.
Acabo de agregar
autoscroll="false"
a
ui-view
, así:
<div ui-view="main" autoscroll="false"></div>
editar
Acabo de probar este método, un poco sucio, pero funciona.
Importe los servicios angulares
$anchorScroll
y
$location
en los controladores relevantes para ui-router
.state
config.
Luego use
$watch
en ui-router
$stateParams
para llamar a
$location.hash(''top'');
en ruta / cambios de estado.
https://docs.angularjs.org/api/ng/service/ $ anchorScroll
https://docs.angularjs.org/api/ng/service/ $ location # hash
.controller(''myCtrl'', function ($location, $anchorScroll, $scope, $stateParams) {
$scope.$watchCollection(''$stateParams'', function() {
$location.hash(''top'');
$anchorScroll();
});
});
Tuve que hacer una combinación de las otras dos respuestas.
<div ui-view autoscroll="false"></div>
En combinación con
$rootScope.$on(''$stateChangeSuccess'', function() {
document.body.scrollTop = 0;
document.documentElement.scrollTop = 0;
});
Nota: Esto está en v0.2.15 de ui-router
Con la versión 1.0.6
, el evento
$stateChangeSuccess
está en desuso a favor del servicio
$transitions
.
Aquí está el código que usé para desplazarme hacia la parte superior en cada cambio de estado:
app.run([''$transitions'', function ($transitions) {
$transitions.onSuccess({}, function () {
document.body.scrollTop = document.documentElement.scrollTop = 0;
})
}]);