javascript - stateprovider - ¿No puede entender por qué la página se carga en el fondo? Problema de desplazamiento automático UI-Router Angular

ui view angular js

Question

Por mi vida, no puedo entender por qué esta página de inicio se carga en la parte inferior. ¿Es este un ui-router angular, angular, javascript o problema de CSS? Estuve atascado en esto durante dos horas y no sé por qué mi página html se carga en la parte inferior en lugar de en la parte superior realmente está matando mi autoestima como programadora: /

Aquí está la página de inicio: [URL Redacted]

ACTUALIZACIÓN - He resuelto este problema. Fue con Angular UI-Router. Ver mi respuesta a continuación para la solución simple.

Uso el UI-Router Angular y Angular y la configuración se ve así ...

default.jade

 doctype html
html(lang=''en'', xmlns=''http://www.w3.org/1999/xhtml'', xmlns:fb=''https://www.facebook.com/2008/fbml'', itemscope=''itemscope'', itemtype=''http://schema.org/Product'')
include ../includes/head
body(ng-controller="RootController")
block content
include ../includes/foot

index.jade

extends layouts/default
block content
section.container
div(ui-view="header")
div(ui-view="content")
div(ui-view="footer")

Angular Config.js

window.app.config(function($stateProvider, $urlRouterProvider) {
// For any unmatched url, redirect to "/"
$urlRouterProvider.otherwise("/");
// Now set up the states
$stateProvider
.state(''home'', {
url: "/",
views: {
"header": { templateUrl: "views/header/home.html" },
"content": { templateUrl: "views/content/home.html" },
"footer": { templateUrl: "views/footer/footer.html" }
},
resolve: { factory: setRoot }
})
.state(''signin'', {
url: "/signin",
views: {
"header": { templateUrl: "views/header/signin.html" },
"content": { templateUrl: "views/content/signin.html" },
"footer": { templateUrl: "views/footer/footer.html" }
},
resolve: { factory: setRoot }
})

Answer 1

Angular UI-Router recientemente actualizó su aplicación para que se desplace automáticamente a nuevas vistas cargadas de forma predeterminada. Esto causaba que las páginas de mi aplicación se cargaran desplazadas hacia abajo. Para desactivarlo, simplemente agregue el siguiente atributo a su ui-view:

<div ui-view="header" autoscroll="true"></div>

Answer 2

Me encontré con este problema hace un tiempo. Lo que está sucediendo es que está en la página 1, se desplazó hacia abajo en la página que imagino, luego hace clic en un botón para ir a la página 2. Luego, el enrutador no reajusta su posición de desplazamiento cuando pasa a la página siguiente. Lo solucioné al desplazarme hacia arriba en todos los cambios de ruta.

Answer 3

aquí hay una solución posible, utilicé un workoround, ya que el desplazamiento automático no funcionaba para mí, así que obligué a mi vista a desplazarse hacia arriba. Espero que esto ayude.

app.run([''$window'', ''$rootScope'', ''$location'' ,''$cookieStore'', ''$state'', ''CacheManager'', ''$timeout'', function($window, $rootScope, $location, $cookieStore, $state,CacheManager, $timeout){
$rootScope.$on(''$viewContentLoaded'', function(){
var interval = setInterval(function(){
if (document.readyState == "complete") {
window.scrollTo(0, 0);
clearInterval(interval);
}
},200);
});
}]);

Answer 4

en el bloque ejecutar agregar:

$rootScope.$on(''$stateChangeSuccess'', function () {
$anchorScroll();
});

Por supuesto, debe inyectar la dependencia $ anclaje de desplazamiento