为什么当改变路由时,ng-view不滚动到页面顶部?

Why ng-view not scrolling to top of the page when changing routes?

本文关键字:滚动 顶部 ng-view 改变 路由 为什么      更新时间:2023-09-26

我已经尝试使用这个解决方案更改路线不会滚动到新页面的顶部。当我在我的网站上点击一个链接来改变路线时,它仍然有问题,它没有滚动到顶部。它将保持与前一页相同的滚动高度。我尝试使用$anchorscroll,但仍然无法解决。

这是我的主索引-我的n -view是

<div layout="column">
        <div class="topNav" layout="row">
            <a href="/#/home" flex="70">
            </a>
            <a class="home" href="/#/home"flex="10">
                <p> HOME </p>
            </a> 
            <a  href="/#/about" flex="10">
                <p> ABOUT </p>
            </a>
        </div>
        <div layout="row">
            <div class="sideNav">
                <div class="icons">
                       <p>Page Garner</p>
                </div>
            </div>
            <ng-view autoscroll="true"></ng-view>
        </div>

这是我的主模板-当我点击其中一个标签来改变路径时,它保持相同的滚动高度

 <div layout="row">
        <div class="project" flex="50">
            <a href="/#/lost">
                <div class="img img1">
                    <p class="hoverText"><span>Lost in the U.S.A!</span>
                        <br> HTML/CSS | Bootstrap | Javascript | AngularJS | Google Maps API | Firebase </p>
                </div>
            </a>
        </div>
        <div class="project" flex="50">
            <a ng-href="/#/checkItOut">
                <div class="img img2">
                    <p class="hoverText"><span>CHECK IT</span>
                        <br> HTML/CSS | Javascript | AngularJS | NodeJS | Express | MongoDB </p>
                </div>
            </a>
        </div>
    </div>
    <div layout="row">
        <div class="project" flex="50">
            <a href="/#/lightRail">
                <div class="img img3">
                    <p class="hoverText"><span>Light Rail Connect</span>
                        <br> HTML/CSS | Javascript | AngularJS | NodeJS | Express | Google Maps API | MongoDB</p>
                </div>
            </a>
        </div>
        <div class="project" flex="50">
            <a ng-click="goToAbout()">
                <div class="img img4">
                    <p class="hoverText"><span>Your <br> Next <br> Project... <br></span> </p>
                </div>
            </a>
        </div>
    </div>

这是我的app.js文件

var app = angular.module('myWebsite', ['ngRoute', 'ngMaterial']);
app.config(function($routeProvider) {
    $routeProvider
      .when('/home', {
        templateUrl: 'Views/home.html',
        controller: 'MainCtrl'
      })
    .when('/about', {
      templateUrl: 'Views/about.html',
      controller: 'MainCtrl'
    })
     .when('/lost', {
      templateUrl: 'Views/lost.html',
      controller: 'MainCtrl'
    })
    .when('/checkItOut', {
      templateUrl: 'Views/checkItOut.html',
      controller: 'MainCtrl'
    })
    .when('/lightRail', {
      templateUrl: 'Views/lightRail.html',
      controller: 'MainCtrl'
    })
    .otherwise({
        redirectTo: '/home'
      })
});

以下关于Stack Overflow的问题有你需要的答案。

AngularJS + Safari:当页面切换时强制页面滚动到顶部