无法弄清楚为什么页面在底部加载?Angular UI-Router 自动滚动问题 [英] Can't figure out why page loads at bottom? Angular UI-Router autoscroll Issue

问题描述

对于我的生活，我无法弄清楚为什么这个主页加载在底部.这是 angular ui-router、angular、javascript 或 CSS 问题吗?我已经坚持了两个小时，不知道为什么我的 html 页面加载在底部而不是顶部真的扼杀了我作为程序员的自尊:/

For the life of me, I cannot figure out why this home page loads at the bottom. Is this an angular ui-router, angular, javascript or CSS issue? I've been stuck on this for two hours and not knowing why my html page loads at the bottom instead of the top is really killing my self-esteem as a programmer :/

这是主页:[网址已编辑]

Here is the home page: [ URL Redacted ]

更新 --我解决了这个问题.它是与 Angular UI-Router 一起使用的.有关简单修复，请参阅下面我的回答.

UPDATE -- I solved this issue. It was with Angular UI-Router. See my answer below for the simple fix.

我使用 Angular 和 Angular UI-Router，设置如下...

I use Angular and Angular UI-Router and the set up looks like this...

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 }
    })

推荐答案

Angular UI-Router 最近更新了它的应用程序，以便它自动向下滚动到默认加载的新视图.这导致我的应用程序页面向下滚动.要关闭此功能，只需将以下属性添加到您的 ui-view 中:

Angular UI-Router recently updated it's app so that it automatically scrolls down to new views loaded by default. This was causing my app's pages to load scrolled down. To turn this off simply add the following attribute to your ui-view:

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

这篇关于无法弄清楚为什么页面在底部加载?Angular UI-Router 自动滚动问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！